Ajax Validation with Jquery

On 04.25.10, In Html, Javascript, PHP, by admin

In simple words, Ajax can execute the request without refreshing the page. There is no doubt that its a very cool client-side feature but for the safe end its a recommended practice to use server-side validation as well. This is because if some malicious user turn off the javascript then he can simply bypass the ajax validations.

Step 1: Loading jQuery and its Plugins

To apply this validation, you have to include two javascript files. These files are related to jQuery. One file is the jQuery library file, while the other one is the plugin for main jQuery library. Now there are two ways to load the files.

1) Load the files locally within your site
2) Reference the files online through google API libraries

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

I am loading the minified version of the javascript to reduce the file size

Step 2: HTML Form

Now let’s start the HTML form. Now you see a form with fields i.e. name, email and two password fields.

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

Step 3: Initialize jQuery and its Plugin

Initialize the jQuery library and its plugin

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

This code says that when the document(DOM) is ready, just 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: Validation
There are two ways to apply conditions and requirements. Let me tell you the easy way first and then the more complex way but much more customizable. Firstly, 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.

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

The important thing is to note that I added the class “required” to both input fields and the email input field has “email” as a class as well. The reason for this is we are telling the plugin to make sure this field is required and also conforms to a valid email address format.

Step 5: Customization

You can easily notice that how easy it was to validate the name and email fields with jQuery validation, 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. Furthermore, the second password input needs to match the first one. See this

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

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

Now rules have 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. Do not forget to check the demo of the post to see how it works. For more documentation and resource on this plugin visit jQuery Validation Plugin

I believe that this tutorial has very helpful and you will put it to good use.

Finally, checkout the demo at this link. You can also download the files from here.