jQuery Validation Plugin - Form validation made easy

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

Example form with custom validation on each form control

HTML Usage
                                                        
<form id="form" novalidate="novalidate">
<div class="form-group"><label>Email</label> <input type="email" placeholder="Enter email"
        class="form-control" required="" aria-required="true"></div>
<div class="form-group"><label>Password</label> <input type="password" placeholder="Password"
        class="form-control" name="password">
</div>
<div class="form-group"><label>Url</label> <input type="text" placeholder="Enter website url"
        class="form-control" name="url">
</div>
<div class="form-group"><label>Number</label> <input type="text" placeholder="Enter numbers only"
        class="form-control" name="number"></div>
<div class="form-group"><label>MinLength</label> <input type="text" placeholder="Enter min length"
        class="form-control" name="min">
</div>
<div class="form-group"><label>MaxLength</label> <input type="text" placeholder="Enter max length"
        class="form-control" name="max">
</div>
<div>
    <button class="btn btn-sm btn-info m-t-n-xs" type="submit"><strong>Submit</strong></button>
</div>
</form>
                                                        
                                                    
HTML Usage
                                                        
<form id="signupForm" method="post" class="form-horizontal" novalidate="novalidate">
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="firstname">First name</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="firstname" name="firstname"
            placeholder="First name">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="lastname">Last name</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="username">Username</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="username" name="username" placeholder="Username">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="email">Email</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="email" name="email" placeholder="Email">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="phone">Phone</label>
    <div class="col-sm-6">
        <input type="number" class="form-control" id="phone" name="phone" placeholder="Contact Numbar">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="address">Address</label>
    <div class="col-sm-6">
        <textarea name="address" id="address" class="form-control" cols="30" rows="5"></textarea>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="password">Password</label>
    <div class="col-sm-6">
        <input type="password" class="form-control" id="password" name="password"
            placeholder="Password">
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-4 col-form-label" for="confirm_password">Confirm password</label>
    <div class="col-sm-6">
        <input type="password" class="form-control" id="confirm_password" name="confirm_password"
            placeholder="Confirm password">
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-6 offset-sm-4">
        <div class="form-check">
            <input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input">
            <label class="form-check-label">Please agree to our policy</label>
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-9 offset-sm-4">
        <button type="submit" class="btn btn-info" name="signup" value="Sign up">Sign up</button>
    </div>
</div>
</form>  
                                                        
                                                    
Javascript Usage
                                                        
<!-- Jquery Validate -->
<script src="plugins/validate/jquery.validate.min.js"></script>
<script>
    $(document).ready(function () {
        $("#form").validate({
            rules: {
                password: {
                    required: true,
                    minlength: 3
                },
                url: {
                    required: true,
                    url: true
                },
                number: {
                    required: true,
                    number: true
                },
                min: {
                    required: true,
                    minlength: 6
                },
                max: {
                    required: true,
                    maxlength: 4
                }
            }
        });
    });
</script>
                                                        
                                                    
Javascript Usage
                                                        
<!-- Jquery Validate -->
<script src="plugins/validate/jquery.validate.min.js"></script>
<script>
    $.validator.setDefaults({
        submitHandler: function () {
            alert("submitted!");
        }
    });
    $(document).ready(function () {
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                phone: {
                    required: true,
                    minlength: 7
                },
                address: {
                    required: true,
                    minlength: 10
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                phone: {
                    required: "Please enter a contact number",
                    minlength: "Your contact number must consist of at least 7 characters"
                },
                contact: {
                    required: "Please enter your address",
                    minlength: "Your address must consist of at least 6 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            },
            errorElement: "em",
            errorPlacement: function (error, element) {
                // Add the `invalid-feedback` class to the error element
                error.addClass("invalid-feedback");
                if (element.prop("type") === "checkbox") {
                    error.insertAfter(element.next("label"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass("is-invalid").removeClass("is-valid");
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).addClass("is-valid").removeClass("is-invalid");
            }
        });
    });
</script>
                                                        
                                                    
List of built-in Validation methods

A set of standard validation methods is provided:

Method Description
remote Requests a resource to check the element for validity.
minlength Makes the element require a given minimum length.
maxlength Makes the element require a given maxmimum length.
rangelength Makes the element require a given value range.
min Makes the element require a given minimum.
max Makes the element require a given maximum.
range Makes the element require a given value range.
email Makes the element require a valid email
url Makes the element require a valid url
date Makes the element require a date.
dateISO Makes the element require an ISO date.
number Makes the element require a decimal number.
digits Makes the element require digits only.
creditpanel-box Makes the element require a credit panel-box number.
equalTo Requires the element to be the same as another one