search

DiegoLopesLima / validate

A simple jQuery plugin to validate forms.
301 stars 217 forks source link
form javascript jquery plugin validate validation validator

readme

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

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