All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
|.reset()||Resets previously generated validation errors|
|.validate(elm, [options])||Checks if a form is valid|
|.confirmElms||This property holds the objects needed to cross-check for the 'confirm' rule|
|.elements||This property holds all form elements for later validation|
|.hasConfirm||This property holds the previous elements in the confirmElms property, but with a|
|.version||Specifies the version of the component|
Resets previously generated validation errors
Checks if a form is valid
elmDOM form element or form id
options.onSuccessCallback to run when form is valid
options.onErrorCallback to run when form is not valid
options.customFlagCustom flags to use to validate form fields
Besides the markup structure you see in
Forms, you need to add
ink-fv-* classes to your inputs, which correspond to validation
rules in this component. Available classes are:
ink-fv-required: Required field
ink-fv-email: Valid e-mail
ink-fv-url: Valid URL address
ink-fv-number: Valid number
ink-fv-phone_ao: Valid telephone number in Portugal, Cape Verde, Mozambique or Angola.
ink-fv-date: Valid date
ink-fv-confirm: Make the user type the same thing twice. Common rule for confirming passwords.
ink-fv-custom: Custom rule (see below example "Custom rule")
<input class="ink-fv-required ink-fv-email"><br>
<input class="ink-fv-number ink-fv-required"><br>
So you have a form and would like to validate it? This example shows how to validate a form and stop it from being submitted when invalid. To use this, add the several ink-fv-* classes to your input elements.
The validate() function will also add "invalid" classes to each of your elements so the user gets a color feedback and an error message below each element (control-group, really).
The following form has a required number field. You must input a number.
The following code validates using a custom rule named
which fails if the input string has less than three characters.
To do this, you must add the
to the input elements you want to validate, and pass the
option to this function, like so:
This property holds the objects needed to cross-check for the 'confirm' rule
This property holds all form elements for later validation
This property holds the previous elements in the confirmElms property, but with a
true/false specifying if it has the class ink-fv-confirm.
Specifies the version of the component