Monday, 24 December 2018

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.

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

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.


Follwing are somse usefull static methods on the validator object:

List of built-in Validation methods

A set of standard validation methods is provided:
Example

Add user

|

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>

No comments:

Post a Comment