Email validation using PHP & Ajax within a form

You can see how email validation is done by using regular expression in PHP. We will further extend this validation by using PHP & Ajax. As you know for validation purpose we will be using the same PHP code so it is better you try to understand the PHP code by reading the email validation tutorial. We will discuss the Ajax part here only.

DEMO of Email validation with Ajax

Ajax code uses the asynchronous JavaScript and XML , the detail how AJAX works is not explained here. We will focus only on email validation part here.

Usually within a form email field is required along with some other fields like name, address etc so we have kept here two other fields name and city name along with email entry field. While filling the data we will first fill name and then email and then city name. When we finish entering the email address we will exit the email address to next field, at that time the validation code written in PHP of email will be executed. So we have used onBlur event handler of email field to trigger the validation code using Ajax. Read this code line.

As you have seen we have passed the email data as entered by user to the Ajax function and then through XMLHttpRequest we will pass this email data to our php code kept at server inside a PHP file. The validation code in PHP is same as our email validation code. The output of this validation is displayed at the form here. See the demo bellow.

Here is the code of this validation written in this page, you can see the source of this page to get this same script.

<script type="text/javascript">
function AjaxFunction(email)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
	httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck() 
 {
 if(httpxml.readyState==4)
 {
document.getElementById("msg").innerHTML=httpxml.responseText;
 }
 }
var url="email-ajax.php";
url=url+"?email="+email;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>

The HTML code to display the form ( as in the above demo ) is here

<form name=f1 action=''>
Your First Name <input type=text name=n1><br>
Any email address <input type=text name=email onBlur="AjaxFunction(this.value);">
<div id="msg"></div>
<br>
Your City Name <input type=text name=city>
<input type=submit value=Submit >
<input type=hidden value=test name=todo>
</form>

Now the code kept within email-ajax.php file is here, this is same code as explained at email validation tutorial

<?
$email=$_GET['email'];
echo $email;
if (!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $email)){
echo "<font color=red> Invalid email</font>";
}else{
echo "<font color=green> Valid Email</font>";} 
?>

The above code in email-ajax.php file can be replaced by this code if you are using email filter function .

if(filter_var($_GET['email'],FILTER_VALIDATE_EMAIL)){ 
echo " Correct email "; }
else{ echo " Wrong email address "; }

Member Signup page uses all types of validation to check userid , password , email address and other input data submitted by user. By using JQuery we need not refresh the page and backend processing for validate the data can be done by using on Blur event of the input fields.

JQuery Membership signup page.

FILTER_VALIDATE_EMAIL PHP Email validation
Ajax Json XML

Subscribe to our YouTube Channel here

Email validation Using Ajax & PHP

Subscribe