The FormValidator / InputValidator Code

There are two ways to set up form validators. The first is to use InputValidator.

This class contains functionality to test a field for various criteria and also to generate an error message when that test fails.

It takes two arguments, the class name that is applied on the element and options to test against and errorMsg to display.

1
2

//html code
<input type="text" name="firstName" class="required" id="firstName" />

1
2
3
4
5
6
7
8
9

//simple validator
var isEmpty = new InputValidator('required', {
    errorMsg: 'This field is required.',
    test: function(field){
        return ((element.getValue() == null) || (element.getValue().length == 0));
    }
});
isEmpty.test($("firstName")); //true if empty
isEmpty.getError($("firstName")) //returns "This field is required."

Then there’s FormValidator.

Evalutes an entire form against all the validators that are set up, displaying messages and returning a true/false response for the evaluation of the entire form.

You can set it up with custom validators using the arguments you would in InputValidator too, for all instances of the FormValidator or just the instance of the FormValidator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//add a validator for ALL instances
FormValidator.add('isEmpty', {
    errorMsg: 'This field is required',
    test: function(element){
        if(element.value.length == 0) return false;
        else return true;
    }
});
//this validator is only available to this single instance
var myFormValidatorInstance = new FormValidator('myform');
myFormValidatorInstance.add('doesNotContainTheLetterQ', {
    errorMsg: 'This field cannot contain the letter Q!',
    test: function(element){
        return !element.getValue().test(/q/,'i');
    }
});

At first glance, I didn’t really like this setup of the form validator. It felt clunky; I would have to create many custom validators. But I realized you can add custom validators globally or for instances and I wouldn’t have to re-build them again. I think this is actually smaller than MooTools.Floor’s validator.

Thank you, Aaron and Chafik. Now we’ll know how to use/test the beta code and we won’t have to write extra validators.

MooTools.Floor was nice enough to post documentation for the class, though there’s a lot of options to go through.

Errors appear in tools tips, form submission via ajax is available, error messages can be customizable, the options are endless! Like I said, there are lots of options.

To set whether an input, textarea, or select element needs to validate, you give the element a class property:

1

<input type="text" class="validate['required','length[4, -1]','differs[email]','digit']" name="test_field" value="" />

To set up a form, you instantiate the MooTools class:

1
2
3
4
5
6
7
8
9

var myCheck = new FormCheck('form_id', {
    tipsClass : 'tips_box',
        display : {
            scrollToFirst : false
        },
        alerts : {
            required : 'This field is ablolutely required! Please enter a value'
        }
});