Never write complex JS script again to handle your form validation rules! With Valideasy, everything's done via HTML attributes added to your form fields.
Specify how a field should validate by simply adding classes and html attributes to it. No complicated JavaScript code to configure basic validation rules.
Valideasy allows you to completly customize how error messages should be displayed. And again, everything's done with simple html attributes!
Valideasy is compatible with all modern browsers, starting from IE7.
js/jquery-valideasy.min.js$('form').submit(function(){
var formIsValid = $(this).valideasy( {options} );
return formIsValid;
});
For most forms, you won't need extra configuration for Valideasy to work properly. In some cases though, you might need to change the default parameters to meet your specific needs. There are two ways to set parameters:
data- attribute in the <form> element.Let's take an example with the mode parameter (described below), you can set it either in your form element:
<form data-valideasy-mode="unified">Or when instantiating the plugin:
$(this).valideasy({
mode: 'unified'
});Here is the full (but short) list of available parameters, along with their default values. To use them as data- attributes, simply prefix with data-valideasy-
Note Parameters expecting functions cannot be used as data- attributes.
defaults = {
mode: 'single',
errorElementId: 'errors',
disableFieldStyle: false,
stepByStep: false,
scrollToFirstError: false,
singleFieldValidation: false,
onValidateBefore: function() { return; },
onValidateAfter: function() { return; },
}
How error messages are displayed.
Indicates the ID of the field(s) supposed to display error messages.
Set to true to stop adding the .error class to fields with errors
Set to true to stop validation at first error
Set to true to auto scroll to the first error field at the end of the validation process
Set to true to only perform validation on one field, instead of on the entire form.
For this to work, Valideasy must be instantiated on a field element.
As of version 2.2.1, you can hook to pre and post validation events to perform certain tasks. Available hooks are :
{fieldId}_{errorElementId} and class .error-wrapper. Any error message triggered by this field will be inserted in that element.{errorElementId} and class .error-wrapper should be placed somewhere in the page. The first error message triggered by a field in the form will be placed in that element.<form novalidate action="/" method="post">
<input class="{rules}" id="name" title="Name" type="text" value="Name" />
<p id="name_errors" class="error-wrapper"></p>
</form>
Example
Important For this rule to work, the default value or option MUST be placed in the title attribute.
Example
Accepts spaces, dashes and points
Example
Accepts spaces, dashes and points
Example
Only digit.
Example
Example
Example
Example
Allows to specifiy that, in a set of fields, at least one is required. All of the fields in the set must have the same data-error-grouprequired attribute.
The data-error-fieldid attribute is used to specify in which element the error message should be inserted.
Example
Allows to specify that the value of the field must be lower or greater than the value of another field.
To indicate the other field, use the data-error-{lowerthan or greaterthan} attribute.
The data-error-lowerthan attribute is used to specify in which element the error message should be inserted.
Example
When a field fails at validating a rule, the .error class is added to it, and will be remove on the next click on the field.
Each validation rule comes with a default error message:
Two ways to customize error messages :
data-error-fieldname attribute. Example
data-error-message-{rule} containing the desired message.
Example
At least one field required + "Minimum Price" must be lower than "Maximum Price".
Example
Only one spot for error messages.
Example
The validation process stops when the first error occurs.
Example
Example
Example