There are several ways to perform validation on html forms but nothing can beat the flexibility and easiness of jQuery’s validation plug-in. The advantage of using this plugin is that you don’t have to write the validation rules from the scratch(ofcourse, thats the reason we use plugin) and the code is much organized and cleaner. I am going to demonstrate examples to show how we can implement validation on html forms.

To use the plugin you would need to include JS file for Jquery plugin and well as Jquery validate plugin like this:-

<script language="javascript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>

Example:-

<body>
<form id="jft_form" method="post"  action="project.php">
                  <p>
                  <label for="name">Enter your name:-</label>
          <a href="http://www.kylinpoker.com/god_also_download_texas_holdem.htm">神来也德州扑克下载</a>         <input name="name" />
                   </p>
                   <p>
                  <label for="project">Which project do you work on:</label>
                  <select id="project" name="it_project">
                          <option value="1" selected="selected">Project 1</option>
                          <option value="2">Project 2</option>
                          <option value="3">Project 3</option>
                  </select>
                  <input class="submit" type="submit" value="Submit"/>
                   </p>
   </form>

</body>


<script>
$(function() {
   $( "#jft_form" ).validate({
           rules: {
                   name: "required"
           }

   });
});
</script>

The validation rule above implies that the name field cannot be left blank. It shows a default message “This field is required” as show below in the screenshot:-

validate1

We can also use customer messages. In the messages block we can specify messages for each field depending on the constraint violation(like maxlength,minlength,required etc.) Here is an example:-

<script>
$(function() {
   $( "#jft_form" ).validate({
           rules: {
                   name: "required"
            },
messages :{

name: {
          required: "Please enter a name"
      }
 }
   });
});
</script>

Screenshot:-

validate2

We can also use several properties like minlength and maxlength for fields such as SSN number, PAN number etc.

SSN: {
                           required: true,
                           maxlength: 9                          
        }

We can also use a custom validation like(The password field must contain upperCase, Lowercase characters and atleast 1 digit etc.). This can be done by using addmethod and then specifying regex pattern inside the method.

Here is an example to validate that both the password field must be same:-

<form id="myform">
    Password:
    <input type="password" id="pnameTxt" name="pnameTxt" placeholder="Enter Password" size="12" class='required' /><br/>
    Confirm Password:
    <input type="password" id="pnameTxt2" name="pnameTxt2" placeholder="Retype Password" size="15" class='required' />
    <br/>
    <br/>
    <input type="submit" />
</form>

  
$(document).ready(function () {

    $.validator.addMethod("passwordCheck", function (value, element) {
        return value == $("#pnameTxt").val();

    }, 'Password and Confirm Password should be same');

    $('#myform').validate({ // initialize the plugin
        rules: {
            pnameTxt2: {
                passwordCheck: true
            }
        },
        submitHandler: function (form) { 
            alert('valid form submitted'); 
            return false; 
        }
    });

});

Here is a working JSFIDDLE example that validates that both the password field must be same using a custom validation method(addMethod).

JS FIDDLE

That was all! I hope it helped 🙂

Thanks.