The following tutorial will guide you through the code created to develop the email validator below. Try it out by entering your own email.

• A pink text field indicates that the email domain does not have an MX record.
• A green text field indicates that the email domain has a valid MX record.

This tutorial will require a fairly good understanding of javascript, the use of the prototype javascript framework, AJAX concepts and PHP.

Download the AJAX MX Record Checker

The first thing is to set up the javascript AJAX request. In this example I am using the 'AJAX.Request' class provided in the prototype library to handle the AJAX request.

Please refer to the code below. The constructor sets up the php file used in the AJAX request. In this case it is "/ajax/ajax-email-checker.php". Additionally a parameter called 'em' has been set to be the value of the email text field (using the prototype notation to retrieve the value of s specific 'id' (in this case $('email').value). The parameter/s will be made available to the requested script.

// Validate MX record using AJAX
function validateEmail() {
    var s_email  = $('email').value;
	
    new Ajax.Request('/ajax/ajax-email-check.php', {
        method:'get',
        requestHeaders: {'Accept':'application/x-json'},
        parameters: {em:s_email},
        onSuccess: function(transport){
            var json = transport.responseText.evalJSON(true);
            email_check = json.e_check;
            email_value = json.email;
        },
        onCreate: function(){
            //$('spinner'+i).show();
        },
        onComplete: function(){
            //$('spinner'+i).hide();   
            _qfMsg = '';
            var errFlag = false;          
            
            if( $('email').value == email_value ){               
				if( email_check == 'false' && !errFlag ){
					errFlag = true;
					$('email_invalid').value = 'true';
					_qfMsg = ' - invalid email ie. an MX record lookup failed.';			
				}else{
					$('email_invalid').value = '';
				}   
				
			   	if (_qfMsg != '' ) {
					$('email').setStyle({
										backgroundColor:'#F6CCDA'
										});
					$('emailMessage').update(_qfMsg);   
				}else{
					$('email').setStyle({
			                        	backgroundColor:'#BCED91'
			                        	});
					$('emailMessage').update(_qfMsg);
			   	} 
		   	}     
        }
    });
}

Code 1: This is the AJAX javascript request that is called when a onkeyup event occurs in the text field.

Please refer to the request script code below. A regular expression is first defined so that the email format can be checked. The 'em' parameter is retrieved and the compared with the regular expression. If the expression matches then the email domain is extracted from the email using the 'split' PHP function. An MX record lookup is performed using the PHP function 'checkdnsrr'. If this return true (ie. an MX record exists) then the 'e_check' field is set to be 'true' in the JSON output. If 'checkdnsrr' returns false, the 'e_check' field remains 'false'.

The AJAX request (refer to code above), interprets the results in the 'onSuccess' event and sets the local 'email_check' and 'email_value' variables to be equal to the values returned by the JSON message. These values are then used in the 'onComplete' event to change the colour of the text field and include a message if the MX record check was unsuccessful. The prototype functions 'setStyle' and 'update' have been used to change the style of the text field and populate the 'emailMessage' container.

define ('REG_EX_EMAIL', 		'/^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$/');
$s_out = '';
$a_json = array();

$s_email = $_GET['em'];

$s_out = '"email":"' . $s_email . '","e_check":"false"';

if( preg_match(REG_EX_EMAIL, $s_email) ){ 
	list($s_user, $s_domain) = split('@', $s_email);
	if( $s_domain != '' ){
		//Check if the email domain has an MX record
		if( checkdnsrr( $s_domain , "MX" ) ){
			$s_out = '"email":"' . $s_email . '","e_check":"true"';
		}
	}
}

$s_json = '{';
$s_json .= $s_out;
$s_json .= '}';

echo $s_json;
?>

Code 2: This is the request script that is called by the AJAX javascript request.

Now all of this need to be included in HTML. Please refer to the next code block. Both the prototype library and the 'validateEmail.js' script have been included. A text field named 'email' with and id of 'email' has been set up with an onkeyup event which calls the AJAX request ie. validateEmail(). There is a span area to hold the errorMessage and a hidden field email_invalid which hold the result of the email check (this should be used to validate that the email is good during form submission).

<script language="JavaScript1.2" src="/js/prototype.1.6.0.3.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="/js/validateEmail.js" type="text/javascript"></script>
<div>
<span style="float:left;"><b>Enter an email address:</b></span><span id="emailMessage"></span>
</div>
<div style="clear:both;"></div>
<p>
<input type="text" name="email" id="email" value="" onkeyup="validateEmail();"/>
</p>
<input type="hidden" name="email_invalid" id="email_invalid" value="" />

Code 3: This is the HTML containing the text field that calls the AJAX request.

Download the AJAX MX Record Checker