Coming soon: Warble is a client side and server side library to quickly handle your data writing less and doing more.
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.
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. |
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 |
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`. |
You can remove validation of a form using the jQuery.fn.validateDestroy
method.
Example:
jQuery('form').validateDestroy();
You can changes the default values of jQuery.fn.validate
using jQuery.validateSetup
method.
Example:
jQuery('form').validateSetup({
sendForm : false,
onKeyup : true
});
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>'
}
}
});
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;
}
}
});