jQuery Validation Plugin Made Easy Tutorial

View Demo

If you need to do some client side validation, the bassistance.de jQuery Validation Plugin is the best one there is. However, it took me a little while to figure it out. So, here it is a little easier! As always, just study the demos source code for clarification on anything you don't understand.

In this order...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery Validation plugin.

Step 3: Fire the jQuery Validation Plugin (in it's most simplest form).

/* Fire Valaidate */
$(document).ready(function(){
   $("#form").validate({
      rules: {
         name: {
            required: true
               }
         },
         messages: {
            name: "Required Field"
         }
     });
});

Step 4: jQuery Validation CSS (in it's most simplest form). Note: the jQuery Validation Plugin adds class error to the inputs/labels. You only style them!

#form label.error {
color:red;
}
#form input.error {
border:1px solid red;
}

Step 5: jQuery Validation HTML (in it's most simplest form).

<form id="form" method="" action="">
   <label for="name">Name</label>
   <input type="text" id="name" name="name">
</form>

Custom Validation Rules: The jQuery Validation Plugin comes standard with a lot of validation rules already built in, but if you need to write another, add the following. A more detailed article is written on it here. This particular custom validation below, prevents URL's from being entered into the comments area.

/* Fire Valaidate */
$(document).ready(function(){
   $.validator.addMethod("nourl", 
      function(value, element) {
         return !/http\:\/\/|www\.|link\=|url\=/.test(value);
            }, 
         "No URL's"
      );
   $("#form").validate({
      rules: {
         comments: {
            nourl: true
             }
         },
         messages: {
            comments: "No URL's"
         }
     });
});

ADVERTISE HERE