How to Validate an Email Address Using PHP & AJAX

Email Address



In this article, we show how to validate an email address using PHP & AJAX.

This is to make sure that the email that a user enters into an email text box is actually a valid email address.

Using AJAX in conjunction with PHP, enables us to validate an email without the page having to be refreshed.

With AJAX, we can call the function to validate the email address once the user clicks away from the box.

So AJAX along with PHP is a powerful tool that can be used in forms, such as validation which is what we are doing now.

So, as you can see in the above form, an email can be entered in.

I use the Javascript onblur() function to validate the email address once the user clicks away from the text box. So once the user enters in the email and clicks away from the text box, s/he will be able to know if the email address is a valid email.

HTML Code

The HTML code to validate we use to create the above email text box is shown below.

Email Address <input type= "text" id="email_entered" onblur="validateemail();"/><label id="validate"></label>

So the above code is the HTML needed to create the text box where the user enters in his or her email.

Javascript & AJAX Code

Below is the Javascript and AJAX code needed to make this email validation form.

<script> function validateemail() { var request; try { request= new XMLHttpRequest(); } catch (tryMicrosoft) { try { request= new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMicrosoft) { try { request= new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request= null; } } } var url= "emailvalidation.php"; var emailaddress= document.getElementById("email_entered").value; var vars= "email="+emailaddress; request.open("POST", url, true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.onreadystatechange= function() { if (request.readyState == 4 && request.status == 200) { var return_data= request.responseText; document.getElementById("validate").innerHTML= return_data; } } request.send(vars); } </script>

So in this code, we create a function called validateemail(). We create a variable called request. And we create a request object and store in this variable. This request object allows the browser to communicate with the server to run PHP code in the background.

We then create a variable named url. This stores the PHP file that has the PHP code that does validation processing of the email address. So this is a separate PHP file that you have to create in order for this script to work.

I then create a variable, email address, that stores the email that the user enters.

The next variable that is created in vars. This is a very important variable because it's the variable sent to the PHP file so that PHP can extract the data that the user has entered into the email text box, which represents the user's email.

We then specify in the request.open() function that the method is POST, the url variable represents the file we want the posted data to go to, and the true makes the request asynchronous.

Once the request is ready, we have a creatd variable return_data and we set this equal to request.responseText. This request.responseText represents the output of the PHP file once it has done its processing. So the return_data variable holds the output from the PHP file that has processed the email address.

We then update the element on our page that has an Id tag of "validate" and change the contents of it through the innerHTML method() and set equal to return_data (the output of the PHP file). If you back at the HTML code, to the right of the email address text box is a label tag having an Id of "validate". This label tag will be updated when the PHP returns the output data.

The line, request.send(vars), actually executes the sending of the data.

This concludes the Javascript and AJAX code.

PHP Code

The PHP code that validates an email address is shown below.

<?php $email= $_POST['email']; if (filter_var($email, FILTER_VALIDATE_EMAIL) !== false) { echo("Valid email address"); } else { echo("Invalid email address"); } ?>

So we retrieve the email from the vars variable.

PHP has a built-in function that can check whether an email is valid or not. So we don't have to use a more sophisticated method such as forming a regular expression for email. We can simply take advantage of PHP's built-in filter_var() function.

If filter_var is not equal to false, this means the email is valid. We print out "Valid email address".

Else, we print out "Invalid email address."

And this is all that is required to validate an email with PHP and AJAX.

Related Resources

How to Retrieve Data From a MySQL Database Using AJAX and PHP