Monday, 24 December 2018

What is Validator method in jquery


Validator() Methods

The main entry point being the validate() method. 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.
Syntax: validate([options]) where options is Object type.
There is lots of option in validate method. I am going to describe each option with example.

Following are the validat option with example

debug (default: false)
Type: Boolean
debug option is boolean type and default value is false means debug otion is by default is disabled. You want to enable debug mode then you need to set true. If debug is true then the form will not be submitted and some errors are displayed on the console.
Example:
$("#myform").validate({
  debug: true
});
rules (default: rules are read from markup (classes, attributes, data))
Type: Boolean
rules is used to define custome rule with combination of key/value pairs. key is name of the element and values is a paln string or object.

Example:
$("#myform").validate({
        rules: {
            name: "required",
            phonenumber: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        }
    });

Example: following is the example of conditional required

$("#myform").validate({
        rules: {
            Name: {
                required: true,
            },
            email: {
                depends: function (element) {
                        return $("#contact_email").is(":checked");
                }
            }
        }
    });
messages (default: the default message for the method used)
Type: Boolean
This is used to define custome message with combination of key/value pairs. key is name of the element and values is the message to display for that element.

Example:
$("#myform").validate({
        rules: {
            name: "required",
            phonenumber: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        }
    });
submitHandler (default: native form submit)
Type: Function()
submitHandler is Callback function for handling the submit when the form is valid . It takes the form as the only argument. The form argument is currently being validated in DOM element.
Example:


$("#myform").validate({
  submitHandler: function(form) {
    form.submit();
  }
});
invalidHandler (default: native form submit)
Type: Function()
It is Callback function for custom code when an invalid form is submitted. It supported two parameters with an event object as first parameter and validator as the second parameter.

Example:


 $("#myform").validate({
        invalidHandler: function (event, validator) {
                        var errorCount = validator.numberOfInvalids();
                        if (errorCount) {
                        var errormessage = "";
                        if (errorCount == 1) {
                    errormessage = 'You missed 1 field. It has been highlighted';
                } else {
                    errormessage = 'You missed ' + errorCount + ' fields. They have been highlighted';
                }
                $("div.error span").html(errormessage);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        }
    });

Add user

|