.reset() method

Resets previously generated validation errors

.validate(elm, [options]) method

Checks if a form is valid

Accepts

• elm

  DOM form element or form id

• options

  Configuration options

• options.onSuccess

  Callback to run when form is valid

• options.onError

  Callback to run when form is not valid

• options.customFlag

  Custom flags to use to validate form fields

• options.confirmGroup

What markup will I need?

Besides the markup structure you see in Forms, you need to add the 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_pt, ink-fv-phone_cv, ink-fv-phone_mz, 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")

For example:

• E-mail field: <input class="ink-fv-required ink-fv-email"><br>
• Phone number field: <input class="ink-fv-number ink-fv-required"><br>
• Website field (optional): <input class="ink-fv-url">

Simple usage

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.

Demo

Code

<div class="ink-form" id="myForm">
    <div class="control-group required">
        <div class="control">
            <label for="myInput">Enter a number</label>
            <input
                id="myInput"
                type="text"
                class="ink-fv-required ink-fv-number"/>
        </div>
    </div>
</div>

<script>
Ink.requireModules(['Ink.UI.FormValidator_1', 'Ink.Dom.Event_1'], function (FormValidator, InkEvent) {
    var myForm = Ink.i('myForm');
    var myInput = Ink.i('myInput');
    
    InkEvent.on(myInput, 'keyup', function (event) {
        var isValid = FormValidator.validate(myForm);
    });
});
</script>

Custom rule.

The following code validates using a custom rule named minthree, which fails if the input string has less than three characters. To do this, you must add the ink-fv-custom and minthree classes to the input elements you want to validate, and pass the customFlag option to this function, like so:

Demo

Code

<div class="ink-form" id="myForm2">
    <div class="control-group">
        <div class="control">
            <label for="myInput2">Enter at least three characters</label>
            <input
                id="myInput2"
                type="text"
                class="ink-fv-custom minthree"/>
        </div>
    </div>
</div>

<script>
Ink.requireModules(['Ink.UI.FormValidator_1', 'Ink.Dom.Event_1'], function (FormValidator, InkEvent) {
    var myForm = Ink.i('myForm2');
    var myInput = Ink.i('myInput2');
    
    InkEvent.on(myInput, 'keyup', function (event) {
        var isValid = FormValidator.validate(myForm, {
            customFlag: [
                {
                    // The name of this rule
                    flag: 'minthree',
                    // message when rule fails
                    msg: 'Please input at least three characters',  
                    // Callback which returns true when okay, false when not
                    callback: function (el) {
                        return el.value.length >= 3;
                    }
                }
            ]
        });
    });
});
</script>