How to Add AJAX Validation to Forms with jQuery

In this tutorial I want to show you how to add AJAX validation to a form with jQuery. For those of you who are not familiar with AJAX, without getting too complicated, allows you to validate on the client-side without having to hit the servers for a request. So the user can actually get an instant feedback if there was an input error without actually submitting the data.

Although AJAX is a cool client-side feature, you must always consider an alternative server-side validation as well. Because AJAX is javascript driven, if the user simply turns off javascript on their browsers, they can by-pass your form requirements. Therefore always use a server-side validation to bulletproof the form. I will not discuss server-side validation in this tutorial but perhaps in the future.

CLICK TO DOWNLOAD SOURCE FILES

CLICK TO VIEW DEMO

STEP 1 (Load jQuery and Plugin)

This validation will take two javascript files. One is the main jQuery library and the other is a plugin for the main jQuery library. There are two ways to load the javascript files. One way is to load it locally within your site and the other way (the way I use) is to reference them online through Google API Libraries. Just make sure you load jQuery Library before you load any of the jQuery plugins.

Inside your head section of your html document, paste in the following two lines of code.

HTML:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>
</head>

Looking at the code above you will see I am loading jQuery version 1.4 and the validation plugin version 1.5.5. The “min” suffix you see simply means I am loading the minified versions of the javascript to reduce the file size.

STEP 2 (HTML Form)

Now let’s create our HTML form. Here you will see a simple form with a name, email and two password fields.

HTML:

	<form action="#" method="post" id="ajaxform">
    	<fieldset>
        	<p><label for="name">Name:</label><br />
            <input type="text" name="name" value=""  /></p>
            <p><label for="email">Email:</label><br />
            <input type="text" name="email" value=""  /></p>
            <p><label for="password">Password:</label><br />
            <input type="password" name="password" value="" id="password" /></p>
            <p><label for="password_again">Re-enter Password:</label><br />
            <input type="password" name="password_again" value="" id="password_again" /></p>
            <p><input type="submit" name="submit" value="Submit" /></p>
        </fieldset>
    </form>

STEP 3 (Initialize jQuery and Plugin)

Now that we have the form ready, we’re all set to start validating the form by writing a few lines of code.

HTML:

<head>
<script type="text/javascript">
 $(document).ready(function(){
    $("#ajaxform").validate();
    });
</script>
</head>

The above code is saying when the document(DOM) is ready run a function. That function is to validate the form with the ID of “ajaxform”. You have now successfully initialized the plugin. Although the plugin is now listening on your requirements, it will not act until you tell it what to look for. In the next step we will do just that!

STEP 4 (Easy Validation)

There are two methods of setting conditions and requirements. I will show you the easy way first and then the more complex way but much more customizable. First we want to simply make sure the “name” field and “email” field is filled in. We don’t want any blank inputs there. The easiest way to do this is simply add a class of “required” to each inputs that you would like for the plugin to check.

HTML:

<p><label for="name">Name:</label><br />
            <input type="text" name="name" value="" class="required" /></p>
            <p><label for="email">Email:</label><br />
            <input type="text" name="email" value="" class="required email" /></p>

In the above you will see that I added the class “required” to both input fields but if you notice, the email input field has “email” as a class as well. The reason for this is we’re telling the plugin to make sure this field is required and also conforms to a valid email address style. So if you type in the email field of “john@doe”, it will come back and say it is not a valid email address.

STEP 5 (Setting a Custom Rule)

Now that you have seen how easy it was to validate the name and email fields, let’s take a look at the password fields. What we want here is to make both password fields required but also match a certain length of characters. In addition, the second password input needs to match the first one. How do we do that you ask? Let’s take a look together.

In the same section where you added the initialization of the jQuery inside the head section of the HTML, add the following lines.

HTML:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("#ajaxform").validate({
	rules: {
	password: {required: true, minlength: 6},
	password_again: {required: true, equalTo: "#password"}
	}
		});
 });
</script>
</head>

As you can see rules were added with password being required set to true and it needs a minlength of 6 and the second condition is for password_again set to required true and it has to “equalTo” the input field with id of password. With these conditions set, we are able to achieve what we are wanting. If you haven’t already, play around with the demo at the beginning of the post to see how it works.

Keep in mind that this only scratches the surface of what this plugin can do. For more documentation and resource on this plugin visit jQuery Validation Plugin

I hope this tutorial has been helpful and you will put it to good use. Next time let’s talk about server-side validation with PHP.

Enjoyed this Post? Please Share!