Validating an Email Address usning jQuery & Ajax

The Idea

You want the user to enter his email address and you want to use a server-side script to confirm that it is a valid email address. This means that it must consist of alphanumericals, no symbols other than - and _ , plus it must contain both symbols . and @. If the email address is invalid, an error message should be displayed to the user.

Implementation

Let’s make an HTML file that displays a label: ‘Enter email address’ and an input text field and a submit button. The HTML file may appear as shown below:

    Enter email address
    
    

    

We can see in above HTML file that the input text field is assigned the class name emailadd for the purpose of accessing it via jQuery code. Following the input text field, is an empty span element of class error. The text to this span element will be assigned from the server generated response, if the user enters an invalid email address.

In order to specify width to the label, input text field and color to the error message, we will make use of the style rules written in the style sheet file from the solution we used in 8-3. The jQuery code to invoke the server side script: validatemail.php for validating the email address entered by the user is as shown below:

$(document).ready(function() {
    $('.error').hide();
    $('#submit').click(function () {
        var em = $('.emailadd').val();
        var data='emailadd='+em;
        $.ajax({
            type:"POST",
            url:"validatemail.php",
            data:data,
            success:function(html) {
                $('.error').show();
                $('.error').text(html);
            }
        });
        return false;
    });
});

The script file validatemail.php, on the server, is designed to check whether the email address of the user is valid or not:

SOME SAMPLE I/O AND RESULT

Input	Result/Output
john-123@yahoo	Not accepted/Invalid email address
john-123@yahoo.com	Accepted