JQuery Form Validation

How to validate form with JQuery

jquery form validation examples,plugins,download,submit,Validate HTML form use JQuery

For validate form use jquery, you have to download jquery validation plugins or give full path of jquery validation plugins file like folowing example.

JavaScript Code
Insert this JavaScript in the head section of your html code.

<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
$("#valForm").validate({
   rules:{
      firstName:{
           required:true
   },
   email:{
          required:true,
         email:true
   },
   password:{
         required:true,
   },
   confirmPassword:{
        required:true,
        equalTo: "#password",
   },
},
  messages:{
      firstName:{
           required:" First Name cant be empty"
     },
     email:{
          required:" Please enter valid Email Address"
     },
     password:{
         required:" Please enter Password"
     },
    confirmPassword:{
        required:" Please confirm password",
        equalTo:" Confirm password did not match"
    },
 },
});
});
</script>

HTML Code

<table border="0" cellpadding="2" cellspacing="1">
<tr>
<td>First Name</td>
<td><input name="firstName" id="firstName" type="text"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" id="email" type="text"></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" id="password" type="password"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input name="confirmPassword" id="confirmPassword" type="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>

Demo

First Name
Email
Password
Confirm Password

Note: If you want customize error message style you can add this style in head section of your HTML file

<style type="text/css">
    label.error {
         font-size:.8em;
         color: red;
         padding-left: .5em;
         vertical-align:top;
   }
</style>