Jquery form validation example, Learn how to validation using Jquery

Jquery form validation example

By Yashwant Chavan, Views 27193, Date 02-Jun-2012

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

tags jquery

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>
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]