jQuery Form Validation Example (2mins)

2min Setup Validation Instructions

Step 1 – Include the latest version of the jQuery Library.

Or use the hotlink welcome file:

double click code to edit/copy

1 2	//hosted by Microsoft Ajax CDN <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 2 – Download the jQuery Validation Plugin.

Or use the hotlink welcome file:

double click code to edit/copy

1 2	//hosted by Google API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3 – Add the following JavaScript validation rules to your webpage (or indlude as seperate js include).

The code below contains the input field validation rules for the form and also includes a direct submit handler (works for mutiple forms on same page).

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

(function($,W,D) {     var JQUERY4U = {};       JQUERY4U.UTIL =     {         setupFormValidation: function()         {             //form validation rules             $("#register-form").validate({                 rules: {                     firstname: "required",                     lastname: "required",                     email: {                         required: true,                         email: true                     },                     password: {                         required: true,                         minlength: 5                     },                     agree: "required"                 },                 messages: {                     firstname: "Please enter your firstname",                     lastname: "Please enter your lastname",                     password: {                         required: "Please provide a password",                         minlength: "Your password must be at least 5 characters long"                     },                     email: "Please enter a valid email address",                     agree: "Please accept our policy"                 },                 submitHandler: function(form) {                     form.submit();                 }             });         }     }       //when the dom has loaded setup form validation rules     $(D).ready(function($) {         JQUERY4U.UTIL.setupFormValidation();     });   })(jQuery, window, document);

Step 4 – Add the HTML for the form and some styles.

The input fields “name” attribute is important as it maps directly to the validation rules.

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<!-- HTML form for validation demo --> <form action="" method="post" id="register-form" novalidate="novalidate">       <h2>User Registration</h2>       <div id="form-content">         <fieldset>               <div class="fieldgroup">                 <label for="firstname">First Name</label>                 <input type="text" name="firstname">             </div>               <div class="fieldgroup">                 <label for="lastname">Last Name</label>                 <input type="text" name="lastname">             </div>               <div class="fieldgroup">                 <label for="email">Email</label>                 <input type="text" name="email">             </div>               <div class="fieldgroup">                 <label for="password">Password</label>                 <input type="password" name="password">             </div>               <div class="fieldgroup">                 <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>                 <input type="submit" value="Register" class="submit">             </div>           </fieldset>     </div>           <div class="fieldgroup">             <p>Already registered? <a href="/login">Sign in</a>.</p>         </div> </form>

Here are some optional CSS styles, which I used for the demo.

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

/* example styles for validation form demo */ #register-form {     background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;     border: 1px solid #DFDCDC;     border-radius: 15px 15px 15px 15px;     display: inline-block;     margin-bottom: 30px;     margin-left: 20px;     margin-top: 10px;     padding: 25px 50px 10px;     width: 350px; }   #register-form .fieldgroup {     background: url("form-divider.gif") repeat-x scroll left top transparent;     display: inline-block;     padding: 8px 10px;     width: 340px; }   #register-form .fieldgroup label {     float: left;     padding: 15px 0 0;     text-align: right;     width: 110px; }   #register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {     float: right;     margin: 10px 0;     height: 25px; }   #register-form .submit {     padding: 10px;     width: 220px;     height: 40px !important; }   #register-form .fieldgroup label.error {     color: #FB3A3A;     display: inline-block;     margin: 4px 0 5px 125px;     padding: 0;     text-align: left;     width: 220px; }

That’s it your done!