Awesome Open Source
Awesome Open Source

Coming soon: A minimalist validation library for client side and server side..

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

	<th>Description</th>

	<th width="75px">Default</th>
</tr>

<tr>
	<td>data-conditional</td>

	<td>Accepts one or more indexes separated by spaces from the `conditional` object that should contain a the boolean return function.</td>

	<td></td>
</tr>

<tr>
	<td>data-ignore-case</td>

	<td>Accepts a boolean value to specify if field is case-insensitive.</td>

	<td>true</td>
</tr>

<tr>
	<td>data-mask</td>

	<td>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 <a href="#data-pattern">`data-pattern`</a> attribute.</td>

	<td>${0}</td>
</tr>

<tr>
	<td>data-pattern</td>

	<td>Accepts a regular expression to test the field value.</td>

	<td>/(?:)/</td>
</tr>

<tr>
	<td>data-prepare</td>

	<td>Accepts a index from the `prepare` object that should contain a function to receive the field value and returns a new value treated.</td>

	<td></td>
</tr>

<tr>
	<td>data-required</td>

	<td>Accepts a boolean value to specify if field is required.</td>

	<td>false</td>
</tr>

<tr>
	<td>data-trim</td>

	<td>Accepts a boolean value. If true, removes the spaces from the ends in the field value. (The field value is not changed)</td>

	<td>false</td>
</tr>

<tr>
	<td>data-validate</td>

	<td>You can use the `data-validate` to calling extensions.</td>

	<td></td>
</tr>
Attribute

Parameters

	<th>Description</th>

	<th width="75px">Default</th>
</tr>

<tr>
	<td>conditional</td>

	<td>Accepts a object to store functions from validation.</td>

	<td></td>
</tr>

<tr>
	<td>filter</td>

	<td>Accepts a selector string or function to filter the validated fields.</td>

	<td>*</td>
</tr>

<tr>
	<td>nameSpace</td>

	<td>A namespace used in all delegates events.</td>

	<td>validate</td>
</tr>

<tr>
	<td>onBlur</td>

	<td>Accepts a boolean value. If true, triggers the validation when blur the field.</td>

	<td>false</td>
</tr>

<tr>
	<td>onChange</td>

	<td>Accepts a boolean value. If true, triggers the validation when change the field value.</td>

	<td>false</td>
</tr>

<tr>
	<td>onKeyup</td>

	<td>Accepts a boolean value. If true, triggers the validation when press any key.</td>

	<td>false</td>
</tr>

<tr>
	<td>onSubmit</td>

	<td>Accepts a boolean value. If true, triggers the validation when submit the form.</td>

	<td>true</td>
</tr>

<tr>
	<td>prepare</td>

	<td>Accepts a object to store functions to prepare the field values.</td>

	<td></td>
</tr>

<tr>
	<td>sendForm</td>

	<td>Accepts a boolean value. If false, prevents submit the form (Useful to submit forms via <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">AJAX</a>).</td>

	<td>true</td>
</tr>

<tr>
	<td>waiAria</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>true</td>
</tr>
Parameter

Callbacks

	<th>Description</th>
</tr>

<tr>
	<td>valid</td>

	<td>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`.</td>
</tr>

<tr>
	<td>invalid</td>

	<td>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`.</td>
</tr>

<tr>
	<td>eachField</td>

	<td>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`.</td>
</tr>

<tr>
	<td>eachInvalidField</td>

	<td>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`.</td>
</tr>

<tr>
	<td>eachValidField</td>

	<td>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`.</td>
</tr>
Callback

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;
		}
	}
});

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,032
html (10,718
plugin (743
jquery (513
validation (311
form (172
validator (98
validate (21

Find Open Source By Browsing 7,000 Topics Across 59 Categories