How to use jQuery validator

jQuery validator plugin

jQuery validator plugin is simple and do client side form validation. Ii has no dependency with ovver other plugin. I aslo provides the lots of customization options. jQuery validator plugin is bundled with set of validation methods, like URL and email validation. Also its provid an API to write your own methods for validations.
Jquery validate works on 'name' attribute that is required for all input elements that you want to validation. It will not work without 'name' attribute and must also be unique to the form.

Features of Juery Validation

• Validate client side form validation
• No dependencies
• Support to Customizable messages
• Supply your own validation callbacks for custom rules
• Support Conditionally validate on certain form controls
• Suported to all major browser.

Plugin Methods

There are three pligin method in this library.

• validate() – It is used to validates the selected form.
• valid() – It is used to checks form or elements is valid or not.
• rules() – it is used to add, remove, read rules for an element.

The main entry point being the validate() method
It provies below three custom sectors that extends the jquery

• :filled – get all elements with a filled value.
• :blank – get all elements with a blank value.
• :unchecked – get all elements that are unchecked.

Validator() Methods

This method is used to validates the selected form and it returns a Validator object whitch have some public methods whitch you can use to trigger validation programmatically.

The following are the validator object methods.

• Validator.form() – It is used to validates the form.
• Validator.resetForm() – It is used to reset the validated form.
• Validator.element() – It is used to validates a fields.
• Validator.numberOfInvalids() – It is used to get the number of invalid fields.
• Validator.showErrors() –It is used to show the specified messages.
• Validator.destroy() – It is used to destroys this instance of validator.

Follwing are somse usefull static methods on the validator object:

• jQuery.validator.addMethod() – It is used to add a custom validation method.
• jQuery.validator.addClassRules() – It is used to add a class method.
• jQuery.validator.format() – It is used to replaces {n} placeholders with arguments.
• jQuery.validator.setDefaults() – It is used to modify default settings for validation.

List of built-in Validation methods

A set of standard validation methods is provided:

• required – It is used to accept the field required.
• email – It is used to accept the element require a valid email
• url – It is used to accept the field require a valid url
• min – It is used to accept the field require a given minimum.
• max – It is used to accept the field require a given maximum.
• date – It is used to accept the field require a date.
• number – It is used to accept the fieldt require a decimal number.
• digits – It is used to accept the field require digits only.
• phoneUS – It is used to validate for valid US phone number.
• minlength – It is used to make the field require a provided minimum length.
• maxlength – It is used to make the field require a provided maximum length.
• rangelength – Makes the element require a given value range.
• remote – It is used to call api( any resolurces) to check the element for validity.
• range – Makes the element require a given value range.
• step – Makes the element require a given step.
• dateISO – Makes the element require an ISO date.
• equalTo – Requires the element to be the same as another one
• accept – Makes a file upload accept only specified mime-types.
• creditcard – Makes the element require a credit card number.
• extension – Makes the element require a certain file extension.
• require_from_group – Ensures a given number of fields in a group are complete.

Example

Add user

Name
Phone Number
Email
Password
|

Source code

<div class="row container">
    <h2>Add user</h2>
    <form action="" id="addCustomer" name="addCustomer">
        <table class="table">
            <thead>
                <tr><th colspan="2"> </th></tr>
            </thead>
            <tbody>
                <tr>
                    <td><label for="name">Name</label> </td>
                    <td><input type="text" name="name" id="name" placeholder="John" /></td>
                </tr>
                <tr>
                    <td><label for="phonenumber">Phone Number</label></td>
                    <td><input type="text" name="phonenumber" id="phonenumber" placeholder="19412514" /></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="email" name="email" id="email" placeholder="alok@singh.com" /></td>
                </tr>
                <tr>
                    <td><label for="password">Password</label></td>
                    <td><input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /></td>
                </tr>
                <tr>
                    <td colspan="2"><button type="submit">Save</button> | <button type="button" id="btnrest">Rest</button></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

JS Code

<script>
    $(function () {
        $("form[name='addCustomer']").validate({
            rules: {
                name: "required",
                phonenumber: {
                    required: true
                    
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                name: "Please enter your firstname",
                phonenumber: "Please enter your phone number",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                email: {
                    required: "Please provide a email",
                    minlength: "Please enter a valid email address"
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
        
    });
    $("#btnrest").click(function () {
    var validator = $("#addCustomer").validate();
        validator.resetForm();
    });
</script>