jqyery validate

method

 

required( ) Returns: Boolean
Makes the element always required.

 

required( dependency-expression ) Returns: Boolean
Makes the element required, depending on the result of the given expression.

 

required( dependency-callback ) Returns: Boolean
Makes the element required, depending on the result of the given callback.

 

remote( options ) Returns: Boolean
Requests a resource to check the element for validity.

 

minlength( length ) Returns: Boolean
Makes the element require a given minimum length.

 

maxlength( length ) Returns: Boolean
Makes the element require a given maxmimum length.

 

rangelength( range ) Returns: Boolean
Makes the element require a given value range.

 

min( value ) Returns: Boolean
Makes the element require a given minimum.

 

max( value ) Returns: Boolean
Makes the element require a given maximum.

 

range( range ) Returns: Boolean
Makes the element require a given value range.

 

email( ) Returns: Boolean
Makes the element require a valid email

 

url( ) Returns: Boolean
Makes the element require a valid url

 

date( ) Returns: Boolean
Makes the element require a date.

 

dateISO( ) Returns: Boolean
Makes the element require a ISO date.

 

number( ) Returns: Boolean
Makes the element require a decimal number.

 

digits( ) Returns: Boolean
Makes the element require digits only.

 

creditcard( ) Returns: Boolean
Makes the element require a creditcard number.

 

accept( extension ) Returns: Boolean
Makes the element require a certain file extension.

 

equalTo( other ) Returns: Boolean

 

option

 

 

debug Boolean Default: false

$(".selector").validate({
   debug: true
})

submitHandler Callback Default: default (native) form submit

$(".selector").validate({
   submitHandler: function(form) {
     $(form).ajaxSubmit();
   }
})

invalidHandler Callback 
Callback for custom code when an invalid form is submitted. Called with a event object as the first argument, and the validator as the second.

$(".selector").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = errors == 1
          ? 'You missed 1 field. It has been highlighted'
          : 'You missed ' + errors + ' fields. They have been highlighted';
        $("div.error span").html(message);
        $("div.error").show();
      } else {
        $("div.error").hide();
      }
    }
 })

ignore Selector 
Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.

$("#myform").validate({
   ignore: ".ignore"
})

rules Options Default: rules are read from markup (classes, attributes, metadata)
Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons), value is an object consisting of rule/parameter pairs or a plain String. Can be combined with class/attribute/metadata rules. Each rule can be specified as having a depends-property to apply the rule only in certain conditions. See the second example below for details.

 

$(".selector").validate({
   rules: {
     // simple rule, converted to {required:true}
     name: "required",
     // compound rule
     email: {
       required: true,
       email: true
     }
   }
})

messages Options Default: the default message for the method used

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

onsubmit Boolean Default: true
Validate the form on submit. Set to false to use only other events for validation.

$(".selector").validate({
   onsubmit: false
})

onfocusout Boolean Default: true
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

$(".selector").validate({
   onfocusout: false
})

onkeyup Boolean Default: true
Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event.

$(".selector").validate({
   onkeyup: false
})

onclick Boolean Default: true
Validate checkboxes and radio buttons on click.

$(".selector").validate({
   onclick: false
})

focusInvalid Boolean Default: true
Focus the last active or first invalid element on submit via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding to steal its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.

$(".selector").validate({
   focusInvalid: false
})

focusCleanup Boolean Default: false
If enabled, removes the errorClass from the invalid elements and hides all errors messages whenever the element is focused. Avoid combination with focusInvalid.

$(".selector").validate({
   focusCleanup: true
})

errorClass String Default: "error"
Use this class to create error labels, to look for existing error labels and to add it to invalid elements.

Sets the error class to "invalid".

$(".selector").validate({
   errorClass: "invalid"
})

validClass String Default: "valid"
This class is added to an element after it was validated and considered valid.
Sets the valid class to "success".

$(".selector").validate({
   validClass: "success"
})

 

errorElement String Default: "label"
Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, no matter the element type).

    Code

Sets the error element to "em".

$(".selector").validate({
   errorElement: "em"
})

wrapper String 
Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.

    Code

Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.

$(".selector").validate({
   wrapper: "li"
})

errorLabelContainer Selector 
Hide and show this container when validating.

    Demo
    View Source

All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the selector passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages.

$("#myform").validate({
   errorLabelContainer: "#messageBox",
   wrapper: "li",
   submitHandler: function() { alert("Submitted!") }
})

errorContainer Selector 
Hide and show this container when validating.

    Demo
    View Source

Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

$("#myform").validate({
   errorContainer: "#messageBox1, #messageBox2",
   errorLabelContainer: "#messageBox1 ul",
   wrapper: "li", debug:true,
   submitHandler: function() { alert("Submitted!") }
})

showErrors Callback Default: None, uses built-in message disply.
A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().

    Code

Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.

$(".selector").validate({
   showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
                                   + this.numberOfInvalids()
                                   + " errors, see details below.");
    this.defaultShowErrors();
  }
 })

errorPlacement Callback Default: Places the error label after the invalid Element
Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

    Demo
    View Source

Use a table layout for the form, placing error messags in the next cell after the input.

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

success String, Callback 
If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".

    Demo
    View Source

Add a class "valid" to valid elements, styled via CSS.

$("#myform").validate({
   success: "valid",
   submitHandler: function() { alert("Submitted!") }
})

    Demo
    View Source

Add a class "valid" to valid elements, styled via CSS, and add the text "Ok!".

$("#myform").validate({
   success: function(label) {
     label.addClass("valid").text("Ok!")
   },
   submitHandler: function() { alert("Submitted!") }
})

highlight Callback Default: Adds errorClass (see the option) to the Element
How to highlight invalid fields. Override to decide which fields and how to highlight.

    Code

Highlights an invalid element by fading it out and in again.

$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn();
     });
  }
})

    Code

Adds the error class to both the invalid element and it's label

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
     $(element).addClass(errorClass).removeClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).removeClass(errorClass).addClass(validClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .removeClass(errorClass);
  }
});

unhighlight Callback Default: Removes the errorClass
Called to revert changes made by option highlight, same arguments as highlight.
ignoreTitle Boolean Default: false
Set to skip reading messages from the title attribute, helps to avoid issues with Google Toolbar; default is false for compability, the message-from-title is likely to be completely removed in a future release

    Code

Configure the plugin to ignore title attributes on validated elements when looking for messages.

$(".selector").validate({
   ignoreTitle: true
})