form

{string} [optional]

null (default)

The jQuery form selector is only required if the validation was initialized without a jQuery object. In that case, if no form is found, the Validation is dropped.

display

{string}

inline|block

inline (default)

Errors are displayed per field.

block

Creates a global container and every errors are displayed inside.

insertion

{string}

append|prepend

append (default)

The error list will be appended to the input if display is inline or to the form if display is block

prepend

The error list will be prepended.

allErrors

{boolean}

false (default)

Only one error per field is displayed even if it contains multiple.

true

All errors are displayed.

trigger

{string}

jQuery mouse event

click (default)

Event that will be delegated to button and trigger the form validation.

The possible values are listed inside _supported.submit.trigger options above or you can also check jQuery mouse event for more details.

button

{string}

input[type="submit"] (default)

jQuery selector of the form submit button that will trigger the form Validation.

errorClass

{string}

error (default)

If an error is found after validating the input, the class will be applied to the input and it's associated label.

<label class="error">
    Username
    <input name="signup[username]" class="error">
</label>

<label for="signup-username" class="error">Username</label>
<input name="signup[username]" id="signup-username" class="error">

errorListClass

{string}

error-list (default)

If an error is found the error list container will receive this class.

<div class="error-list" data-error-list="">
    <ul>
        <li>Username must not be empty.</li>
    </ul>
</div>

inputContainer

{string} [optional]

null (default)

jQuery selector of the block that contains the input and label. The errorClass will be added on this container if there is a Validation error.

<div class="control-group" class="error">
    <label class="control-label" 
    for="inputPassword" class="error">Password</label>
    <div class="controls">
        <input type="password" id="inputPassword" class="error">
    </div>
</div>

clear

{string|false}

focusin (default)

On an input focusin or keypress, the errorClass will be cleared.

false

The errorClass class will persist until the form is submitted again.

scrollToError

{boolean|object}

false (default)

This option accept an object with offset and duration in ms. If this option is set the page will scroll to the first error when the form gets validated or when using $(form).addError().

scrollToError: {
    offset: -100,
    duration: 500
}

trigger

{string} [optional]

null (default)

Event that will be delegated to the input and trigger the it's validation.

The possible values are listed inside _supported.dynamic.trigger options above or you can also check jQuery keyboard event for more details.

* Be cautious if you are using keypress as the backspace will not trigger the validation since this is a part of jQuery itself, use keyup instead.

delay

{numeric}

300 (default)

Time in milliseconds for the trigger to be fired.

messages

{object} [optional]

This option is used to override every error message corresponding to the specified validation rule.

* If you want to override only for a specified form, use $(form).validate({messages: {})instead.

//-- Global override --
Validation.messages = {
    'NOTEMPTY': 'Overriding the global NOTEMPTY message'
};

//-- Form override --
$('form').validate({
    messages: {
        'NOTEMPTY': 'Overriding the form\'s NOTEMPTY message'
    }
};

labels

{object} [optional]

• Global: Overrides every matching inputName on page
• Initialization: Overrides every matching inputName inside the form
• HTML Attribute: Overrides only the specified field

//-- Global override --
Validation.labels = {
    'contact_v1[email]': 'Custom label name from Configuration'
};

//-- Initialization override --
$('form').validate({
    labels: {
        'contact_v1[email]': 'Custom label name from Initialization'
    }
};

<!-- HTML Attribute override -->
<input name="contact[username]"
    data-validation="[L>=2]"
    data-validation-label="This custom label from attribute">

Will be executed on Validation initialization.

Will be executed after the submit.settings.button is triggered and before the Validation.

Will be executed if errors are found.

* The object of errors will be return as the last function parameter as an "extra" parameter.

Will be executed if no errors are found and before the form gets submitted.

Will be executed if no errors are found.

* Careful, using this callback will override the native HTML form.submit().

Will be executed if no errors are found and after the form gets submitted.

* Some browser may not execute this function correctly as it's attempting to redirect after submit().

Will be executed if error(s) are found on the dynamic input.

Will be executed if no error(s) are found on the dynamic input.

Will be executed regardless if error(s) were found on the dynamic input.

data-validation

{array}

Contains a list of validation rules. See below for the complete list. If the field contains nodata-validation or has disabled attribute, it will not be validated.

<!-- Validates for alphanumeric and char length between 6 and 24 (inclusively) -->
<input name="signup[username]"
       data-validation="[MIXED, L>=6, L<=24]">

If it is not set, a generic error message will be displayed.

* Using this attribute will only display 1 message for all of the rules defined in data-validation.

* Using "$" inside the message serves as a placeholder for the input short name.

<!-- Translated error message -->
<input name="signup[username]"
       data-validation="[MIXED, L>=6, L<=24]"
       data-validation-message="<?=$transErrorUsername;?>">

data-validation-regex

data-validation-regex-message

{regex}[optional]

{string}[optional]

Regular expression to validate against.

If the data-validation-regex attribute is set, you must define a data-validation-regex-message or the default message will be displayed.

* Only "/" is accepted as a valid regex delimiter.

* Placing "$" inside the message will be replaced by the input short name.

<!-- Username must not contain "admin", start or end by a digit -->
<input name="signup[username]"
       data-validation-regex="/^\d|admin|\d$/i"
       data-validation-regex-message="Word 'admin' is not allowed in $ ...">

data-validation-label

{string}[optional]

Setting this attribute will override the inputName inside the error message.

<!-- Replaces the inputName inside the error message -->
<input name="signup[username]"
       data-validation="[L>=6, L<=24]"
       data-validation-label="Custom label name">

NOTEMPTY

/./

Field must not be empty.

<!-- Search field must not be submitted empty -->
<input name="search[text]"
       data-validation="[NOTEMPTY]">

NUMERIC

/^[0-9]+$/

Validate for a numeric only value.

MIXED

/^[\w\s-]+$/

Validate an alphanumeric string (no special chars)

NOSPACE

/^[^\s]+$/

Validate a spaceless string

TRIM

/^[^\s].*[^\s]$/

Validate a spaceless string at start or end

DATE

/^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}(:\d{2})?)?$/

Validate a date YYYY-MM-DD

EMAIL

/^([^@]+?)@(([a-z0-9]-*)*[a-z0-9]+\.)+([a-z0-9]+)$/i

Validate an email

URL

/^(https?:\/\/)?((([a-z0-9]-*)*[a-z0-9]+\.?)*([a-z0-9]+))(\/[\w?=\.-]*)*$/

Validate an url

PHONE

/^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/

Validate a north american phone number

OPTIONAL

/^.*$/

With this rule a field becomes optional as long as it is empty. If a value is set inside the field, the validation applies.

* COMPARISON

/^([LV])([<>]=?|==|!=)([^<>=!]+?)$/

The comparison rule allows to compare the V (value) or L (length) of a field with either a predefined value or an other field using the "name" attribute as a target.

<!-- Value must be greater or equal to 18 -->
<input name="restriction[age]"
       data-validation="[V>=18]">

<!-- Password must be between 8 and 32 characters -->
<input name="signin[password]"
       data-validation="[L>=8, L<=32]">

<!-- Email confirmation must match email -->
<input name="signup[email]"
       data-validation="[EMAIL]">
<input name="signup[email-confirm]"
       data-validation="[V==signup[email]]]">

validation

string|array

Adds a validation data attribute "data-validation" to a selected DOM element similar to jQuery's ".addClass()".

// As String, separated by a coma for multiple
$( "selector" ).addValidation("NOTEMPTY");
$( "selector" ).addValidation("NOTEMPTY, L>=6");
// As Array
$( "selector" ).addValidation(["NOTEMPTY", "L>=6"]);

validation

string|array

Removes a validation data attribute "data-validation" to a selected DOM element similar to jQuery's ".removeClass()".

// As String, separated by a coma for multiple
$( "selector" ).removeValidation("NUMERIC");
$( "selector" ).removeValidation("NUMERIC, V>=100");
// As Array
$( "selector" ).removeValidation(["NUMERIC", "V>=100"]);

error

object

This API method can only be used after the Validation has been instantiated and with the same jQuery selector to recuperate the validation options.

* In this example, using $("#myForm").addError( ... ); would not work since it is not the same jQuery selector.

$("form#myForm").validate();

$("form#myForm").addError({
    "inputName": "errorMessage",
    "secondInputName": [
        "array of messages"
        "can contain multiple"
    ]
});

[inputName]

string

array

This API method can only be used after the Validation has been instantiated and with the same jQuery selector to recuperate the validation options.

$("form#myForm").validate();

// Clears all form errors
$("form#myForm").removeError();

// Clears only input-specific errors
$("form#myForm").removeError([
    "inputName",
    "secondInputName"
]);

debug

{boolean} [optional]

false (default)

When debug configuration is set to true, information about the form validation will be printed in the browser console (F12). If you have difficulties to get the validation working on one of your form(s) try to activate the debug mode.

* The debug should be removed once the configuration is set properly.

$("form#myForm").validate({
    debug: true
});