A client recently wanted to include validation on their website registration form that would not only check that the input text was a genuine email address but also to disallow registration of any “free” email addresses.

Using jQuery we can easily add this to the website by creating a regular expression, which checks for email addresses such as yahoo, gmail, hotmail, etc prior to submitting the form to the server. The regular expression can be adapted to reject any domain specified.

First add the form to your website using standard HTML code:

<form method="post" name="form1" action="">
  <fieldset>
   <label>Email Address:</labe>
   <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
   <input type="submit" value="Submit" id="btn-submit" />
  </fieldset>
</form>

Step 1 – Initiate the jQuery Validation

After adding jQuery to your website we set up the code that will perform the validation when the submit button is clicked – first clearing any existing error messages from previous attempts:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

    });
});

Step 2 – Check that the Input Field is Not Empty

For the first step of the validation we want to add the jQuery code that will check if there is any text in the input field and if not return the appropriate error message and stop the form being submitted:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 3 – Check that the Entered Text is a Valid Email Address

Our first regular expression will check to make sure that the entered text is a valid email address – i.e. contains at least one “.”, an “@” symbol and an appropriate top-level domain suffix (e.g. .com, .net, etc):

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        else if(!emailReg.test(emailaddressVal)) {
            $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 4 – Block or Prevent Free Email Addresses – e.g. yahoo.com, gmail.com and hotmail.com

The 2nd regular expression will now check the entered text against our pre-defined domain names – in this case yahoo.com, gmail.com and hotmail.com. Once again an error message is displayed and the form submission stopped if the email address matches one of the domains:

$(document).ready(function() { 

  $('#btn-submit').click(function() {  

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailblockReg =
     /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
      $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

    else if(!emailblockReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">No yahoo, gmail or hotmail emails.</span>');
      hasError = true
    } 

    if(hasError == true) { return false; }

    });
});

The above example can easily be configured to reject (or even accept) any specified email address. To see it in action – Check out our online demo of Email Validation Using jQuery.

Posted on Wednesday, February 17th, 2010 under Website Coding, jQuery