/validate

A simple jQuery plugin to validate forms.

Coming soon: Warble is a client side and server side library to quickly handle your data writing less and doing more.

jQuery Validate

License: MIT.

Version: 1.1.2.

Requires: jQuery 1.7+.

To use jQuery Validate you just need to include in your code a version of the jQuery library equal or more recent than 1.7 and a file with the plugin. Click here to download the plugin.

After this, you just need select your form and calling the jQuery.fn.validate method.

See a example:

jQuery('form').validate();

After calling the jQuery.fn.validate method, you can validate your fields using data attributes, that are valid to the HTML5, according to the W3C.

See a example to required field:

<form>
	<input type="text" data-required />
</form>

jQuery Validate supports all fields of the HTML5 and uses WAI-ARIA for accessibility. You can use several attributes to your validations.

Attributes

Attribute Description Default
data-conditional Accepts one or more indexes separated by spaces from the `conditional` object that should contain a the boolean return function.
data-ignore-case Accepts a boolean value to specify if field is case-insensitive. true
data-mask Accepts a mask to change the field value to the specified format. The mask should use the character groups of the regular expression passed to the `data-pattern` attribute. ${0}
data-pattern Accepts a regular expression to test the field value. /(?:)/
data-prepare Accepts a index from the `prepare` object that should contain a function to receive the field value and returns a new value treated.
data-required Accepts a boolean value to specify if field is required. false
data-trim Accepts a boolean value. If true, removes the spaces from the ends in the field value. (The field value is not changed) false
data-validate You can use the `data-validate` to calling extensions.

Parameters

Parameter Description Default
conditional Accepts a object to store functions from validation.
filter Accepts a selector string or function to filter the validated fields. *
nameSpace A namespace used in all delegates events. validate
onBlur Accepts a boolean value. If true, triggers the validation when blur the field. false
onChange Accepts a boolean value. If true, triggers the validation when change the field value. false
onKeyup Accepts a boolean value. If true, triggers the validation when press any key. false
onSubmit Accepts a boolean value. If true, triggers the validation when submit the form. true
prepare Accepts a object to store functions to prepare the field values.
sendForm Accepts a boolean value. If false, prevents submit the form (Useful to submit forms via AJAX). true
waiAria Accepts a boolean value. If false, disables WAI-ARIA. true

Callbacks

Callback Description
valid Accepts a function to be calling when form is valid. The context (`this`) is the current verified form and the parameters are respectively `event` and `options`.
invalid Accepts a function to be calling when form is invalid. The context (`this`) is the current verified form and the parameters are respectively `event` and `options`.
eachField Accepts a function to be calling to each field. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.
eachInvalidField Accepts a function to be calling when field is invalid. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.
eachValidField Accepts a function to be calling when field is valid. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.

Removing validation

You can remove validation of a form using the jQuery.fn.validateDestroy method.

Example:

jQuery('form').validateDestroy();

Changing the default values of jQuery.fn.validate

You can changes the default values of jQuery.fn.validate using jQuery.validateSetup method.

Example:

jQuery('form').validateSetup({
  sendForm : false,
  onKeyup : true
});

Creating descriptions

You can create descriptions to the field states.

Example:

<form>
  <input type="text" data-describedby="messages" data-description="test" />

  <span id="messages"></span>
</form>
$('form').validate({
  description : {
    test : {
      required : '<div class="error">Required</div>',
      pattern : '<div class="error">Pattern</div>',
      conditional : '<div class="error">Conditional</div>',
      valid : '<div class="success">Valid</div>'
    }
  }
});

Creating extensions

You can use the jQuery.validateExtend method to extend the validations and calling the extensions with data-validate attribute.

Example:

<form>
	<input type="text" name="age" data-validate="age" />
</form>
jQuery('form').validate();

jQuery.validateExtend({
	age : {
		required : true,
		pattern : /^[0-9]+$/,
		conditional : function(value) {

			return Number(value) > 17;
		}
	}
});