Our jQuery form submit and validation code is based on the same one we created in our “Create Your Own jQuery AJAX Form Submit With Validation” tutorial in February. The additional items that we are going to add are:

View DemoDownload Source Files

The Form HTML

A standard form with the same format that we used in the earlier tutorial:

<form id="form-sign-up" class="styled" action="" method="post">
    <fieldset>
        <h3>Register Now!</h3>
        <ol>
            <li class="form-row">
                <label>Name:</label>
                <input name="name" type="text" class="text-input required" />
            </li>
            <li class="form-row">
                <label>Email:</label>
                <input name="email" type="text" class="text-input required email" />
            </li>
            <li class="form-row">
                <label>Password:</label>
                <input name="password" type="password" id="password-1" class="text-input required password" />
            </li>
            <li class="form-row">
                <label>Repeat Password:</label>
                <input name="password1" type="password" id="password-2" class="text-input required password" />
            </li>
            <li class="button-row">
                <input type="image" src="images/btn_sign_up_off.png" alt="Sign Up" value="OK" class="btn-submit img-swap" />
            </li>
        </ol>
    </fieldset>
</form>

The key items here are the classes we have assigned to the text elements, which will be used by our jQuery code to identify what validation rules and error messages should apply. We have 3 different types:

• Name – has class “required”, which checks that the input is not empty and is used as the basis for all of our form elements
• Email – has class “email”, which checks the input against a regular expression for matching standard email formats
• Password/Re-enter Password – has class “password”, which will check the 2 entries against each other to make sure they match

Our Form CSS

There are a couple of CSS rules, which are required in order for our error animation to work – these are highlighted in the code below with appropriate comments:

/*Form styles*/
.styled {
font: 15px Arial, sans-serif;
width: 422px;
margin: 20px auto;
background: url(images/bg_form.png) no-repeat 0 0;
padding-top: 20px;
}
.styled fieldset {
background: url(images/bg_form.png) no-repeat 0 100%;
padding: 0 25px 20px 25px;
position: relative;
}

/* Form rows */
.styled fieldset li.form-row {
margin-bottom: 5px;
padding: 3px 0;
clear: both;
position: relative; /* Required as error messages will be absolutely positioned */
}
.styled label {
display: block;
font-weight: bold;
float: left;
width: 100px;
line-height: 24px;
padding-top: 4px;
color: #555;
}
.styled fieldset li.button-row {
margin-bottom: 0;
padding: 5px 0 0;
text-align: right;
}

/* Text input styles */
/* Default */
.styled input.text-input {
height: 22px;
width: 254px;
padding: 5px 8px;
background: url(images/bg_input.png) no-repeat 0 0;
border: none;
font: normal 15px Arial, sans-serif;
color: #333;
line-height: 1em;
}

The Form Validation CSS

The following CSS rules are for styling and setting up the form error messages:

/* Form Validation */
/* CSS code to create the error messages */
.styled span.error {
font: bold 11px Arial, sans-serif;
line-height: 1em;
color:#fff;
text-shadow: 1px 1px 1px #000;
background: url(images/arrow_error.png) no-repeat 0 center;
border-right: 1px solid #6c0202;
height: 11px;
padding: 8px 15px 11px 20px;
display: none; /* Required as we will use jQuery to fade in the error message */
position: absolute; /* Required */
top: 3px;
right: 0; /* Required - initially set all error messages to the right of the form row */
}

/* Change the input field styles when an error message is present */
.styled fieldset li.error input.text-input {
background-position: 0 -64px;
}

The jQuery Code

The code below includes comments explaining each function in more detail:

// Form validation and submit when button is clicked
	$('.btn-submit').click(function(e){

		// Declare the function variables:
		// Parent form, form URL, email regex and the error HTML
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var $error = $('<span class="error"></span>');

		// Prepare the form for validation - remove previous errors
		$('li',$formId).removeClass('error');
		$('span.error').remove();

		// Validate all inputs with the class "required"
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();
			if(inputVal == ''){
				$parentTag.addClass('error').append($error.clone().text('Required Field'));
			}

			// Run the email validation using the regex for those input items also having class "email"
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('error').append($error.clone().text('Enter valid email'));
				}
			}

			// Check passwords match for inputs with class "password"
			if($(this).hasClass('password') == true){
				var password1 = $('#password-1').val();
				var password2 = $('#password-2').val();
				if(password1 != password2){
				$parentTag.addClass('error').append($error.clone().text('Passwords must match'));
				}
			}
		});

		// All validation complete - Check if any errors exist
		// If has errors
		if ($('span.error').length > 0) {

			$('span.error').each(function(){

				// Set the distance for the error animation
				var distance = 5;

				// Get the error dimensions
				var width = $(this).outerWidth();

				// Calculate starting position
				var start = width + distance;

				// Set the initial CSS
				$(this).show().css({
					display: 'block',
					opacity: 0,
					right: -start+'px'
				})
				// Animate the error message
				.animate({
					right: -width+'px',
					opacity: 1
				}, 'slow');

			});
		} else {
			$formId.submit();
		}
		// Prevent form submission
			e.preventDefault();
	});

	// Fade out error message when input field gains focus
	$('.required').focus(function(){
		var $parent = $(this).parent();
		$parent.removeClass('error');
		$('span.error',$parent).fadeOut();
	});

The comments are fairly self explanatory. So to briefly summarise the jQuery code:

1. When the submit button is clicked the validation process starts by declaring all function variables, including the error message span tag
2. Clean up the form by removing any errors span tags plus the error class on the form rows from the previous click so we are starting with a clean slate
Loop through all input fields with class “required” and first check if they contain text
3. Validate input fields with class “email” using a standard regex pattern for email address formats
4. Get the 2 password field values and check if they match
5. If any of our checks returns an error indentify that form row by adding class=”error”, clone the error span tag, append to the form row and insert the relevant error message text
6. Position each error message span tag to the right of the form row based on the total width of the message
7. Fade in each error message and alert the user by animating 5px to the left
8. Fade out and remove the errors when the user clicks on the text input field

With the basic process now in place you can easily modify and expand the animation functions and try different effects to suit your users and website.

View DemoDownload Source Files

Regular expressions offer an extremely flexible and powerful way of adding validation to your website forms. Combined with jQuery, it allows you to ensure that data sent to the server matches all of your requirements.

In this post I have included several example regular expressions that we have used in our web design projects for validating form input.

For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.

View Demo

For each example we have created a css class, which can then be assigned to the relevant form element. If you are creating your own validation code/plugin there are obviously more efficient ways of creating a complete validation system but for the tutorial we have kept each regular expression sample separate and also use the “keyup” event.

jQuery To Handle the Submit Button

In order to use these validation functions in a form we need to add jQuery that will check for the presence of any span elements with the class “error”. We do this by using the length property. If the length is > 0 the form submit can be stopped and the user alerted:

$('#btn-submit').click(function() {
  if($('span.error').length > 0){
    alert('Errors!');
    return false;
  } else {
    $('#btn-submit').after('<span class="error">Form Accepted.</span>');
    return false;
  }
});

Now that we have this code to check for errors, we can add any of the examples below to the form.

Example 1 – Validates Numeric Characters Only

Accepts only 0 – 9

$('.keyup-numeric').keyup(function() {
    $('span.error-keyup-1').hide();
    var inputVal = $(this).val();
    var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
    if(!numericReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-1">Numeric characters only.</span>');
    }
});

Example 2 – No Special Characters

Allows only letters, numbers and spaces. All other characters will return an error.

$('.keyup-characters').keyup(function() {
    $('span.error-keyup-2').remove();
    var inputVal = $(this).val();
    var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-2">No special characters allowed.</span>');
    }
});

Example 3 – Maximum of 8 Characters

Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}

$('.keyup-limit-8').keyup(function() {
    $('span.error-keyup-3').remove();
    var inputVal = $(this).val();
    var characterReg = /^([a-zA-Z0-9]{0,8})$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-3">Maximum 8 characters.</span>');
    }
});

Example 4 – US Phone Number

Allows numbers 2-9 for the first and second group of 3 followed by 0-9 for the last 4 with the groups separated by “-” e.g:

• 234-234-1234 = OK
• 134-234-1234 = Error
• 234-134-1234 = Error

$('.keyup-phone').keyup(function() {
    $('span.error-keyup-4').remove();
    var inputVal = $(this).val();
    var characterReg = /^[2-9]\d{2}-\d{3}-\d{4}$/;
    if(!characterReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-4">Format xxx-xxx-xxxx</span>');
    }
});

Example 5 – Validate Date Format

Allows date format – mm/dd/yyyy – including “/”. All other combinations will return errors e.g:

• 01/31/2001 = OK
• 31/01/2001 = Error
• 1/01/2001 = Error

$('.keyup-date').keyup(function() {
    $('span.error-keyup-5').remove();
    var inputVal = $(this).val();
    var dateReg = /^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$/;
    if(!dateReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-5">Invalid date format.</span>');
    }
});

Example 6 – Check For Possible Fake Text

This is an interesting example, which checks for possible fake text being entered into your form. The regex looks for groups of the same letters occuring in groups of 3 or more e.g:

• foo = OK
• fff = Error

$('.keyup-fake').keyup(function() {
    $('span.error-keyup-6').remove();
    var inputVal = $(this).val();
    var fakeReg = /(.)\1{2,}/;
    if(fakeReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-6">Invalid text.</span>');
    }
});

Example 7 – Check Email Address Format

This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:

• email@email.com = OK
• email.email.com = Error

$('.keyup-email').keyup(function() {
    $('span.error-keyup-7').remove();
    var inputVal = $(this).val();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-7">Invalid Email Format.</span>');
    }
});

Example 8 – No Free Email Addresses

Another useful email validation regular expression checks for email addresses using free emails – in the example below we check for yahoo, gmail and hotmail:

• email@yahoo.com = Error
• email@email.com = OK

$('.keyup-email-2').keyup(function() {
    $('span.error-keyup-8').remove();
    var inputVal = $(this).val();
    var emailFreeReg= /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!aol.com)([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailFreeReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-8">No Free Email Addresses.</span>');
    }
});

Example 9 – Visa Card Number Format

For an example of validating a credit card we can use the following regular expression, which checks the input against the standard format for Visa credit cards – All card numbers must start with a 4 & cards may either have 16 digits or 13 digits for older cards:

• 4166000000000000 = OK
• 4166000000000 = OK
• 41660000000000001 = Error
• 2166000000000000 = Error

$('.keyup-cc').keyup(function() {
    $('span.error-keyup-9').remove();
    var inputVal = $(this).val();
    var ccReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    if(!ccReg.test(inputVal)) {
        $(this).after('<span class="error error-keyup-9">Invalid visa card number</span>');
    }
});

Hopefully some of the above examples will be useful for your forms and also help demonstrate how powerful regular expressions can be.

View Demo

This is a good exercise to see how various components/snippets can be combined to create a complete function.

The tutorial assumes you have the basic understanding of the HTML and CSS for the form.

View DemoDownload Source Files

The Basic Components

So, in order to create our process we are going to use the following components:

1. A general HTML form format
2. Our standard CSS rules for styling the form
3. Add default text for our input fields, including a function to remove the default text when the form is submitted – see earlier blog post – Add Default Text To Form Fields Using jQuery
4. jQuery validation rules, which are applied when a form is submitted
5. jQuery code for processing the form and submitting the contents via AJAX

1. HTML Form Format

Obviously everyone has their own preferences when it comes to how you code your form. After experimenting with several different formats I found that using an ordered list to handle the layout, which each form input field and associated label being one list item, has been easiest to use and so far has been robust enough to take most standard form requirements.

For the tutorial we will create a standard contact form with a name field, email, telephone and text area for comments:

<form id="form-contact" class="styled" action="/user_functions.php" method="post">
		    <fieldset>
			  <legend>Contact Form</legend>
			  <ol>
			    <li class="form-row">
				  <label>Email:</label>
				  <input id="input-email" type="text" class="text-input required email default" name="email" value="" title="Enter Your Email Address" />
				</li>
				<li class="form-row">
				  <label>Name:</label>
				  <input id="input-name" type="text" class="text-input required default" name="name" value="" title="Enter Your Full Name" />
				</li>
				<li class="form-row">
				  <label>Phone:</label>
				  <input id="input-phone" type="text" class="text-input" name="phone" value="" />
				</li>
				<li class="form-row">
				  <label>Comments:</label>
				  <textarea id="input-message" class="text-area" name="message" cols="40" rows="8"></textarea>
				</li>
				<li class="button-row text-right">
				  <input class="btn-submit" type="submit" value="submit" name="submit" />
				</li>
			  </ol>
			</fieldset>
		  </form>

As usual our jQuery will use css classes and IDs for the selectors. The key ones we need to include are:

• Class “btn-submit” on the form submit button – used to trigger the function.
• Class “required” on any input fields to be validated.
• Class “email” as an additional class on those input fields to be tested against our regular expression for correctly formatted email addressed.

2. The Form CSS

The CSS I use as the basis for this format is as follows:

.styled {
font-family: Arial, sans-serif;
}
.styled fieldset {
border: 1px solid #ccc; padding: 10px;
}
.styled fieldset legend {
font-size: 16px; font-weight: bold; color: #000; text-transform: capitalize; padding: 5px; background: #fff; display: block; margin-bottom: 0; border: 1px solid #ccc;
}
.styled fieldset ol, .styled fieldset ol li {
list-style: none;
}
.styled fieldset li.form-row {
margin-bottom: 3px; padding: 2px 0; width: 100%; overflow: hidden; position: relative;
}
.styled label {
font-size: 12px; display: block; font-weight: bold; float: left; width: 100px; margin-left: 5px; line-height: 24px;
}
.styled input.text-input, .styled .text-area {
background: #fefefe; border-top: 1px solid #909090; border-right: 1px solid #cecece; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #bbb; padding: 3px; width: 220px; font-size: 12px;
}
.styled input.text-input.default.active, .styled .text-area.default.active {
color: #666; font-style: italic;
}
.styled fieldset li.button-row {
margin-bottom: 0; padding: 2px 5px;
}
form input.btn-submit {
padding: 3px 7px; border: 1px solid #fff; background: #066CAA; font-size: 12px;
}

This is pretty much the minimum styling we need to add to get the labels and input fields aligned and pad/border the form. This can then be applied to your forms by adding the class “styled”. You can build on the above CSS to make your forms a little more exciting!

Any specific rules you may want to add for each form can be done using it’s id. For our contact form #form-contact, we want to set the width to 320px and center on the page.

Validation CSS

In addition to the form layout we also need a few additional CSS rules, which will handle the styling of the validation results:

.styled span.error {
font-size: 11px; position: absolute; top: 0; right: 0; display: block; padding: 2px;
}
.styled fieldset li.error {
color: #D8000C; background: #fff0f0 url(../media/images/checkers.png) repeat; border: 1px solid #f9c7c7; padding: 5px 0;
}
.styled fieldset li.error label {
text-align: left;
}

3. The jQuery Code – Default Text Function

Before we tackle the form submission and validation lets add the jQuery code to handle the default text for the input fields – See earlier post for explanation.

$(".default").each(function(){
  var defaultVal = $(this).attr('title');
  $(this).focus(function(){
    if ($(this).val() == defaultVal){
      $(this).removeClass('active').val('');
    }
  });
  $(this).blur(function() {
    if ($(this).val() == ''){
      $(this).addClass('active').val(defaultVal);
    }
  })
  .blur().addClass('active');
});

We can now add default text to any of our form fields by simply adding the class “default” and using the title attribute to hold the default text. In our contact form example we have decided to add default text to both the email fields and the name field, which are both required.

Since we dont want the default text to be submitted with the form for any empty fields we add a jQuery function, which will automatically check all input fields with class “default” and remove the text if the value is the same as the title attribute:

function defaulttextRemove(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
      $(this).val('');
    }
  });
}

Now for our main function, handling the form submit. There are a few parts to this process:

1. Check the form details – i.e. exactly which submit button has been pressed and the action URL for the data, since we are creating a generic function, which can be used by any forms, including multiple instances on one page.
2. Run the relevant validation on all required input fields – for our example we have both standard required text field and email validation using regular expressions to check for a correct email format.
3. Assuming no errors, we serialize the form data and using AJAX, post the contents to the form URL and return a result.

4. Form Validation and AJAX Form Submit jQuery Code

// Declare the loading gif as a variable, which will be used later
var $loading = $('<div class="loading"><img src="/media/images/loading.gif" alt="" /></div>');

// Form validation and submit when button is clicked
$('.btn-submit').click(function(e){

  // Declare the function variables - parent form, form URL and the regex for checking the email
     var $formId = $(this).parents('form');
     var formAction = $formId.attr('action');
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  // In preparation for validating the form - Remove any active default text and previous errors
      defaulttextRemove();
      $('li',$formId).removeClass('error');
      $('span.error').remove();

  // Start validation by selecting all inputs with the class "required"
      $('.required',$formId).each(function(){
          var inputVal = $(this).val();
          var $parentTag = $(this).parent();
          if(inputVal == ''){
              $parentTag.addClass('error').append('<span class="error">Required field</span>');
          }

      // Run the email validation using the regex for those input items also having class "email"
	  if($(this).hasClass('email') == true){
              if(!emailReg.test(inputVal)){
                  $parentTag.addClass('error').append('<span class="error">Enter a valid email address.</span>');
              }
          }
    });

    // All validation complete - check whether any errors exist - if not submit form
       if ($('span.error').length == "0") {
           $formId.append($loading.clone());
           $('fieldset',$formId).hide();
           $.post(formAction, $formId.serialize(),function(data){
               $('.loading').remove();
               $formId.append(data).fadeIn();
           });
      }
    // Use the following to prevent the form being submitted the standard way
      e.preventDefault();
});

When the submit button is clicked all input fields with the class “required” are checked to see if they have a value. If not an error class is applied to the parent list tag (allows us to highlight the complete form row) as well as an error text message inserted after the input field.

If the input field also has the class “email” a further validation check is made using a standard regular expression to see if the text pattern matches that of an email format.

If any of the validation checks return an error then the form submit is stopped. Here we use an extremely easy and effective way of seeing if there are any errors by using $(‘span.error’).length. If length is not “0″ then there are error messages still active.

If all validation is clear we then use the $.post function to submit the form data. At the same time we hide the form contents and replace with a loading gif.

When the data is returned from the AJAX post we then hide the loading gif and replace the form contents with the data itself – usually this would be something like a status message for the user.

The Complete jQuery Code

jQuery(document).ready(function($) {
	var $loading = $('<div class="loading"><img src="/media/images/loading.gif" alt="" /></div>');
	$(".default").each(function(){
		var defaultVal = $(this).attr('title');
		$(this).focus(function(){
			if ($(this).val() == defaultVal){
				$(this).removeClass('active').val('');
			}
		});
		$(this).blur(function() {
			if ($(this).val() == ''){
				$(this).addClass('active').val(defaultVal);
			}
		})
		.blur().addClass('active');
	});
	$('.btn-submit').click(function(e){
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		defaulttextRemove();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		$('li',$formId).removeClass('error');
		$('span.error').remove();
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();
			if(inputVal == ''){
				$parentTag.addClass('error').append('<span class="error">Required field</span>');
			}
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('error').append('<span class="error">Enter a valid email address.</span>');
				}
			}
		});
		if ($('span.error').length == "0") {
			$formId.append($loading.clone());
			$('fieldset',$formId).hide();
			$.post(formAction, $formId.serialize(),function(data){
				$('.loading').remove();
				$formId.append(data).fadeIn();
			});
		}
		e.preventDefault();
	});
});
function defaulttextRemove(){
	$('.default').each(function(){
		var defaultVal = $(this).attr('title');
		if ($(this).val() == defaultVal){
			$(this).val('');
		}
	});
}

View Demo

Download Source Files

This can easily be achieved by using similar code shown in our previous posts on Using jQuery to Validate Search Box Input and Email Validation Using jQuery.

1. The Password Input Fields

<form method="post" name="form1" id="form-password" action="">
  <fieldset>
    <label>Password:</label>
    <input type="password" name="password" id="password" value="" size="32" />
    <label>Re-Enter Password:</label>
    <input type="password" name="password-check" id="password-check" value="" size="32" />
    <input type="submit" value="Submit" id="submit">
  </fieldset>
</form>

2. The jQuery Validation Code – Check That Both Passwords Match

jQuery(function(){
        $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#password").val();
        var checkVal = $("#password-check").val();
        if (passwordVal == '') {
            $("#password").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#password-check").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will perform the following checks upon clicking the submit button:

• Check that a password has been entered and return an error message if the input field is empty.
• Check that the “re-enter password” field contains text and return an error message if the input field is empty.
• Finally – compare both password texts to check if they match

If any of the validation checks return an error then the form submission on your website is stopped with the “return false” command.

Check out the demo.

In a recent project a client required validation on a search form input that would only allow numbers, letters and a “-”.

The Search Form

<form method="post" name="form1" action="">
     <fieldset>
          <div><label>Search:</label><input type="text" name="search-text" id="search-text" value="" size="32" /></div>
          <div><label></label><input type="submit" value="Submit" id="btn-search" /></div>
     </fieldset>
</form>

The jQuery Validation Code

jQuery(function(){
        $("#btn-search").click(function(){
        $(".error").hide();
        var hasError = false;
        var searchReg = /^[a-zA-Z0-9-]+$/;
        var searchVal = $("#search-text").val();
        if(searchVal == '') {
            $("#search-text").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#search-text").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will first check that text has been entered and return an error message if the search box is empty. Then check, using a simple regular expression, that the entered text only contains alphanumeric characters or a “-”. If either of these validation checks return and error message then the form submission is stopped with the “return false” command.

Check out the demo.

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.

Although most modern browsers will still display code with errors, validation ensures that your web pages meet current HTML and CSS standards. From a web designers point of view validation is a quick and easy way to check for errors that may be causing issues with the way your website renders on the screen.

There are however several areas where website validation is important for your site:

Website accessibility

An increasingly important aspect of web design is to develop and create websites where all of the information can be accessed by all visitors … afterall why build a website for your business if a significant portion of internet users cannot access the content?

The validation process helps identify potential areas where issues with accessibility may occur and removes possible “barriers” to visitors who may be vision impaired, motor impaired or cognitive impaired.

For many countries this is now becoming a legal requirement and it is important for both clients and web designers to ensure that your websites do not discriminate.

Search Engine Optimization

Search engine spiders use the structure of your web page to identify different components of your content to help with indexing. Whilst errors in code may not stop spiders in their tracks, code that is not correctly formed, e.g. tags that are not closed or even tags that do not technically exist, may result in the search engines missing out on important keywords or phrases that identify your content.

At the end of the day your goal is to drive traffic to your website through organic search results. It would be unfortunate if all of your hard work developing valuable content is negated by simple errors in the HTML code.

Check out our Search engine optimization and the importance of good code blog post for more information.

Faster Web Page Loading Times

Validated code will help ensure that your browser renders the page as quickly as possible on the screen. In a world where the patience of internet users is constantly decreasing every second helps in guaranteeing that your visitors stay on your website.

Browser Compatibility

Website coding standards take into account future expected developments so although most modern browsers can handle errors in code, validation will help guarantee that as browsers develop your website will be “forwards compatible” and continue to function and render on the screen as originally intended.

Website validation helps reduce the possibility of having to hire a web designer for potentially costly rewrites of your web page in the not too distant future.

Updating Website Code

For web designers, updating other peoples code can be a frustrating a time consuming experience, spending several hours just to correct unecessary errors that should have not occurred in the first place. Creating semantically meaningful, valid HTML and CSS from day one will help your clients update their website in the future and ultimately minimize costs.

Be Professional With Your Web Design

From a web designers point of view, lets not forget one important aspect … creating valid, standards compliant XHTML and CSS is a sign of being professional. Whilst a website may look shiny on the surface, what’s below is equally important.

It is true however that validation does not guarantee that your pages will work in all browsers, neither does it mean that the XHTML and CSS used in the web page layout is appropriate but it is certainly a start to ensuring that your code is optimized and standards compliant. As a client you should expect your code to always validate.

I am always shocked by how few locally designed websites in Bangkok validate. Validation is a relatively simple process which allows you to easily check the code of your website to make sure that it meets the latest standards.

I have found that the best service to use for validation is http://validator.w3.org.

It is an excellent way for clients to check potential web design companies to see whether their knowledge of websites and coding goes further than just the surface – simply check the web design company’s own website!