Validation

This jQuery plugin makes simple clientside form validation easy. It comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages

jQuery validation files available in /libcommon/plugins/jquery-validation. Have a look at this usage:

Quick Start

Example
<form id="simple-form">
    <div class="form-group">
        <label for="email">Name</label>
        <input type="email" class="form-control" id="name" name="name"
               placeholder="Name" required>
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" name="email"
               placeholder="Email" required>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" required> &nbsp; Agree our policy
        </label>
    </div>
    <button type="submit" class="btn btn-primary pull-right">Send Message</button>
</form>

<!-- Simple jquery validation script -->
<script type="text/javascript">
    $(document).ready(function (event) {
        $('#simple-form').validate();
    });
</script>

Custom Rules and Messages

Here you can define custom rules and error messages for jQuery validation

Example
<!-- HTML contents -->
<form id="registration-form">
    <div class="form-group">
        <label for="email">Name</label>
        <input type="email" class="form-control" required id="name" name="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" required name="email" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" required id="password" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" required name="agree">   Agree our policy
        </label>
    </div>
    <button type="submit" class="btn btn-primary pull-right">Create Account</button>
</form>

<!-- jQuery Validation code

<script>
    $("#registration-form").validate({
        rules:{
            name: {
                required:true,
                minlength: 6,
            },
            email{
                required:true,
                email:true,
            },
            password:{
                required:true,
                minlength: 6
            },
            confirmPassword:{
                equalTo: "#password"
            },
            agree:{
                required:true
            }
        },
        messages:{
            name:{
                required: "Name is required",
                minlength: "Name must be atleasr 6 characters"
            },
            email:{
                required: "Email is required",
                email: "Enter a valid email"
            },
            password:{
                required: "Password is required",
                minlength: "Password contain atleast 6 characters"
            },
            confirmPassword:{
                equalTo: "password and confirmation password should be same"
            },
            agree:{
                required: "Required"
            }
        }
    });

</script>

Other Options

We can customize rules and messages used in validation like below

Trigger validation on single field

<script>
    $('#email').valid();
</script>

To invalidate a valid form

<script>
    var validator = $("#registration-form").validate();
    validator.showErrors({
        email: "Email not registered"
    });
</script>
For more examples and details Click Here