Previous Page

Tell user if their email is valid as they are typing.

Check out an example of this here


Below is the css and html on the JQuery_email_validation.php page (the main page). This is the page that contains the jQuery source script and the script with the AJAX which checks the email by sending the user's input, as they are typing, to email_check.php

<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery valid email?</title>

<style type="text/css">
body{
	text-align:center;	
}
#form {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:25px;
	height: auto;
	width: 300px;
	padding:40px;
	text-align:left;
	color:#069;
		
	 box-shadow: 2px 1px 25px #000000;
    -moz-box-shadow: 2px 1px 25px #000000;
    -webkit-box-shadow: 2px 1px 25px #000000;
	
	 border-radius: 15px;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     o-border-radius: 15px;
}
h1{
	color:#565656;	
}
h2{
	color:#2c55eb;	
}
label{
		font-size:1.5em;
		font-weight:bold;	
}
input{
	background-color:#CCC;
	color:#006;
	width:250px;
    height:40px;
	font-size:1.4em;
   
}
#email_feedback {	height: auto;
	width: 290px;
	font-size:1.4em;

}
</style>
</head>

<body>
<h1>Validate email on focus, blur, and keyup...as user types</h1>
<div id="form">		
    <form action="" method="post">
    
    <h2>Valid email entered?</h2>	
    
    <label  for="email">Email:</label>
    <input  type="text"  id="email"  size="40"    /> 

         <div id="email_feedback" ><!-- The message displayed here comes from email_check.php -->
        </div>
       

    </form>
</div>

<!--====================================================================================================================-->

<!-- Below is the jquery minified library that you need to include. Just make sure you have it looking in the
	 right path. Mine is in a folder called js which is outside the folder containing this php page - thus, the ../   -->
<script src="../js/jquery-1.7.1.min.js"></script>

<!-- Below is the javascript used to check if valid -->
<script>
/* ====================== THE FUNCTION validEmail  =====================================*/
function validEmail(email)
{
	// posts the text as the user is typing and checks it using the php page below
		$.post('email_check.php',{email: email}, function(data){
			$('#email_feedback').text(data);			
		});
		
}


/* ====================== FOCUS , BLUR , and KEYUP  (appended to each other) =========== */

$('#email').focusin(function(){
	if($('#email').val() === ''){
		$('#email_feedback').text('Enter a valid email address');
	}
	else{
		validEmail($('#email').val());			
	}	
}).blur(function(){
	$('#email_feedback').text('');	
}).keyup(function(){
	validEmail($('#email').val());	
});
</script>

</body>
</html>

Below is the email_check.php that contains a function to check if the email is valid and echos the appropriate message to the div with the id email_feedback - specified in the javascript at the bottom of JQuery_email_validation.php.

	<?php

	if (isset($_POST['email']))
	{
		$email = $_POST['email'];		

		if(!empty($email))
		{
			if(!validEmail($email))// call the function below to check for valid email
			{
				echo 'Not valid yet!'; // this gets echoed to the div with the id="email_feedback"
										
			}
			else
			{
				echo 'Email address valid!'; // this gets echoed to the div with the id="email_feedback"			
			}
		}
		else
		{
			echo 'Enter a valid email address!'; // this gets echoed to the div with the id="email_feedback"
		}

	}
/*====================================================================================================================*/
	
/* Is this a valid email?   function() to verify below */	
function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@");
   if (is_bool($atIndex) && !$atIndex)
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex);
      $localLen = strlen($local);
      $domainLen = strlen($domain);
      if ($localLen < 1 || $localLen > 64)
      {
         // local part length exceeded
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // domain part length exceeded
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // local part starts or ends with '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // local part has two consecutive dots
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // character not valid in domain part
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // domain part has two consecutive dots
         $isValid = false;
      }
      else if
      (!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/', str_replace("\\\\","",$local)))
      {
         // character not valid in local part unless 
         // local part is quoted
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
      {
         // domain not found in DNS
         $isValid = false;
      }
   }
   return $isValid;
}

?>