Member Panel

jQuery Form Validation
September 25th, 2012 - 2 Comments »

 

In this short tutorial, I will show you how to use a jQuery validation plugin to setup front-end form validation in just a few minutes.

I’ve kept this tutorial very simple with clear instructions so that anyone can implement some validation on their webpage forms. This can be done in just four simple steps…

Step 1: Include the latest version of jQuery

You can download the latest version of jquery library here http://docs.jquery.com/Downloading_jQuery

…or you can use the Google hosted API below:

Insert the following code between your < head > < / head > tags:

Step 2: Download the jQuery Validation Plugin

You can download the latest version of jquery validation plugin from here
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

…or use the Microsoft Ajax CDN hosted file as below:

Step 3: Insert the Javascript

Add the following JavaScript validation rules to your webpage (or include as external JavaScript File)

The below code contains the rules and error messages for input field validation. It also includes a direct submit handler (can be used for multiple forms on a single webpage).

Step 4: Create the HTML form for validation

Here is the code snippet for the HTML form which is used to apply above validation rules. Insert this into the body of your webpage.

That is all for the jQuery form validation. Add some styles to form to make it looking nice.

Related posts:

 

 

2 Responses

  1. Piyush says:

    different error text for different element and addMethod you can find a nice example here
    http://www.thewebexpert.in/jquery-vidation-js-tutorial/

  2. nisha says:

    hi, cool plugin!!! does this plugin check 2 password.. ya like both must be same!!!

Leave a Reply