jQuery Validate

License: MIT.

Version: 1.1.2.

Requires: jQuery 1.7+.

##Setup ###1. Include the Libraries To use jQuery Validate, your JavaScript needs to include references to

The jQuery library (v1.7+)
The jQuery Validate library (Click here to download the plugin)

###2. Validate Your Form(s) Use jQuery to select your form and call the jQuery.fn.validate method on it.

Example:

jQuery('form').validate();

###3. Update Form Fields Calling jQuery.fn.validate on your form element will turn on validation for that form. But none of form's field elements have any validation rules associated with them yet. jQuery Validate uses data-* attributes to wire up your validation rules.

Example:

<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.

data-* Attributes

Attribute	Description	Default
`data-conditional`	A function name. The function must: Return a boolean value describing whether the validation passed (true) or failed (false) Be methods of a JavaScript object named `conditional`.
`data-confirm`	A string specifying the HTML `id` of another element. The value of this field will be compared to the value of the element with the specified `id`.
`data-ignore-case`	Accepts a boolean value to specify if the field is case-insensitive.	`true`
`data-mask`	Accepts a mask to change the field value to the specified format. This mask uses the matched groups from the regular expression passed to the `data-pattern` attribute.	`${0}`
`data-maxlength`	An integer describing the maximum length of the value. When applied to a checkbox, this will count the total number of checked checkboxes with the same name as the current checkbox element.
`data-minlength`	An integer describing the minimum length of the value. When applied to a checkbox, this will count the total number of checked checkboxes with the same name as the current checkbox element.
`data-pattern`	Accepts a regular expression to test the field value. Note: regular expression delimiters (usually '/') are not needed.	`(?:)`
`data-prepare`	Accepts a function name. The function must exist on an object named `prepare`. The function can manipulate the value before validation is run on it. It returns the updated value. Note: this does not change the actual field value in the HTML.
`data-required`	Accepts a boolean value to specify if field is required.	`false`
`data-trim`	Accepts a boolean value. If true, trims whitespace from the beginning and end of the value before validation. Note: this does not change the actual field value in the HTML.	`false`
`data-validate`	Accepts the name of an object that extends the validator (via `jQuery.fn.validateExtension`. More information about these extensions below.

Parameters

You can override the default jQuery Validate behavior by setting the following properties with jQuery.validateSetup

<tr>
	<td><code>namespace</code></td>
	<td>A namespace used for all delegated events.</td>
	<td><code>validate</code></td>
</tr>
<tr>
	<td><code>onBlur</code></td>
	<td>Accepts a boolean value. If true, validation will be triggered when focus leaves the field.</td>
	<td><code>false</code></td>
</tr>
<tr>
	<td><code>onChange</code></td>
	<td>Accepts a boolean value. If true, validation will be triggered when the field's selection, checked state, or value changes.</td>
	<td><code>false</code></td>
</tr>
<tr>
	<td><code>onKeyup</code></td>
	<td>Accepts a boolean value. If true, validation will be triggered after any key is pressed.</td>
	<td><code>false</code></td>
</tr>

<tr>
	<td><code>onSubmit</code></td>
	<td>Accepts a boolean value. If true, validation will be triggered when the form is submitted.</td>
	<td><code>true</code></td>
</tr>
<tr>
	<td><code>prepare</code></td>
	<td>An object with functions that can create or alter field values before they are validated. Select which of the object's functions to run on each field with the <code>data-prepare</code> attribute.</td>
	<td></td>
</tr>
<tr>
	<td><code>sendForm</code></td>
	<td>Accepts a boolean value. If false, prevents the default submit action of the form. (Useful to submit forms via <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">AJAX</a>).</td>
	<td><code>true</code></td>
</tr>
<tr>
	<td><code>waiAria</code></td>
	<td>Accepts a boolean value. If false, disables <a href="http://www.w3.org/WAI/PF/aria/" target="_blank">WAI-ARIA</a>.</td>
	<td><code>true</code></td>
</tr>
<tr>
	<td><code>sendInvalidForm</code></td>
	<td>If true, the form will activate the default submit action even if some form fields fail validation.</td>
	<td><code>false</code></td>
</tr>

Parameter	Description	Default
`conditional`	An object with custom validation methods.
`filter`	Accepts a selector string or function to filter the validated fields.	`*`

Callbacks

Callbacks are run after each field is validated or after the entire form has been validated, depending on the success or failure state.

	<td>Function called when the form is valid. The context (<code>this</code>) is the current form. The method should take two parameters: <code>event</code> and <code>options</code>.</td>
</tr>
<tr>
	<td><code>invalid</code></td>
	<td>Function called when the form is invalid. The context (<code>this</code>) is the current form. The method should take two parameters: <code>event</code> and <code>options</code>.</td>
</tr>
<tr>
	<td><code>eachField</code></td>
	<td>Function called after validation of each field, whether it passes validation or not. The context (<code>this</code>) is the current field. The method should take three parameters: <code>event</code>, <code>status</code> and <code>options</code>.</td>
</tr>
<tr>
	<td><code>eachInvalidField</code></td>
	<td>Function called after validation fails on a field. The context (<code>this</code>) is the current field. The method should take three parameters: <code>event</code>, <code>status</code> and <code>options</code>.</td>
</tr>
<tr>
	<td><code>eachValidField</code></td>
	<td>Function called after validation succeeds on a field. The context (<code>this</code>) is the current field. The method should take three parameters: <code>event</code>, <code>status</code> and <code>options</code>.</td>
</tr>

Callback	Description
`valid`

Removing Validation

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

Example:

jQuery('form').validateDestroy();

Setting Validation Options

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

Example:

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

Creating Descriptions

Descriptions are information describing failures. Using the following data-* properties, you can specify which containers describe the failures for a specific field.

data-describedby: Set the value of this attribute to the HTML id of the element that displays validation messages of this field.
data-description: Set the value of this attribute to the name of an object inside the description object passed to jQuery.fn.validate. The object should contain one or more of the the following fields:
- required: a string containing the content to display inside the describedby element when the field fails validation due to the data-required validation.
- pattern: a string containing the content to display inside the describedby element when the field fails validation due to the data-pattern validation.
- conditional: a string containing the content to display inside the describedby element when the field fails validation due to the data-conditional validation.
- valid: a string containing the content to display inside the describedby element when the field is successfully validated.

Example:

<form>
    <input type="text" 
	       data-describedby="messages" 
	       data-description="test" />
	<div id="messages"></div>
</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 Validation Extensions

You can create your own validation rules by calling the jQuery.validateExtend and passing an object containing validation rules. Invoke the custom validations on fields with the 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;
		}
	}
});

bmahoney-getty/jquery-validate

jQuery Validate

data-* Attributes

Parameters

Callbacks

Removing Validation

Setting Validation Options

Creating Descriptions

Creating Validation Extensions