Jquery form validation example

Jquery Validator plugin is simple and easy to use. The purpose of web form validation is to ensure that the user is not entering wrong data. There two types of validations 1]server side validation and 2] client side validation. We will perform the client side validation using jquery validator plugin api

Html Form Validation Using jQuery

Download Jquery Validation Plugin Validation Plugin. Make sure that Jquery.js and downloaded validation plugin is enclosed in the <script> tag

<script type="text/javascript" src="/js/plugin/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>

Let walk through powerful and extensible jQuery form validation plugin.Its simple , Easy to understand and uses Javascript Object-Oriented aspect. Refer below code snippet contains html form "myForm" along with fields, javascript method submitForm() performs the validation part. For that first of all we need to define validation rules, then need to set Validation Error messages.While defining rules with form field id should be matched.Error message will display beside the form field. Refer below screen shot

Jquery Form Validation Example

Also learn how to write Custom Jquery Validation Method

“Jquery Validation Plugin provides lots of option for customization, validation rules and dynamic form validations.”

<form method="post" id="myForm" name="myForm">
 <h2 class="widgettitle2" style="margin: 13px 0px 2px 0px">Contact Us</h2>
 <p class="legend"><strong>Note:</strong> Required fields are marked with an asterisk (<em>*</em>)</p>   
 <fieldset>
  <legend>[ Your Details ] </legend>
  <div><label for="name">Name<em>*</em></label> <input tabindex="1" size="40" type="text" name="name" id="name"/></div>
  <div><label for="email">Email Id<em>*</em></label> <input tabindex="2" size="40" type="text" name="email" id="email"/></div>
  <div><label for="contactnumber">Contact Number</label> <input tabindex="3" size="40" type="text" name="contactnumber" id="contactnumber"/></div>
  <div><label for="city">City<em>*</em></label> <input tabindex="4" size="40" type="text" name="city" id="city"/></div>
  <div><label for="description">Description<em>*</em></label> <textarea tabindex="5" name="desc" cols="35" rows="4" id="desc"></textarea></div>
 </fieldset> 
 <div class="buttonrow"><input tabindex="6" type="button" class="btn" value="Submit" onclick="submitForm();"/> <input tabindex="7" type="button" class="btn" value="Cancel" /></div> 
</form> 

// submitForm() method should be located inside <script> tag or in external .js file
<script>
function submitForm(){
 var validator = $("#myForm").validate({
  rules: {                   
   name: "required",
   email: "required",
   contactnumber: "required",
   city: "required",
   desc: "required"  
     },  
     errorElement: "span" ,                              
     messages: {
      name: " Enter Name",
      email: " Enter Email",
      contactnumber: " Enter Contact No",
      city: " Enter City",
      desc: " Enter Description"
     }
 });
 if(validator.form()){ // validation perform
  $('form#myForm').attr({action: 'mycontroller'});   
  $('form#myForm').submit();
 }
}
</script>