Mootools FormValidator – How to use (Part 2)

This part of the tutorial shows how to trigger the form validation with a link or button and how to build a custom validator.

Submit button

Our “register”-button has no default behaviour, so we add an event which validates and submits the form.

We first check if the button exists – this is a good practice, since it’s possible that the same page is loaded without the form (for example if the form was submitted and the page now contains “Thanks for registering.” – but no form anymore).

If the button does exist, we add a click-Event: Namely calling the validate()-method of the FormValidator, which checks all the values and then submits the form:

if ($('registerbtn')) {
	$('registerbtn').addEvents({
		'click': function() { myFormValidator.validate(); }
	});
}

Custom validators

How to create a custom validator

There are lots of validators present in the mootools-package, but you may soon encounter a situation where none of these is sufficient. Like here:

The username should consist of numbers and letters only. There is a validator called “validate-alphanum” already present in the mootools package, but it allows underscores! That’s not what we want.

(This has something to do with regular expressions and might be called a bug, but regardless, we fix it by creating a new validator).

A validator consists of a name, an error-message and a test-method which does the validation. So we create a custom validator called “alphaNumFix”, here our first try:

The error-message simply returns a string, the test method has two arguments: the element being tested and additional properties. To check if the given element only consists of numbers and letters, we use a simple regular expression, into which we feed the element value:

FormValidator.add('alphaNumFix', {
	errorMsg: 'Username wrong',
	test: function(element, props) {
		return (/^[a-zA-Z0-9]+$/).test(element.get('value'));
	}
});

After trying this out we soon realize two problems:

• The error message makes sense for our username field, but we can’t use it for another field.
• An empty username would be valid with this test.

First the error-message: This validator should simply report what’s wrong – not that it’s wrong for “username”. So we should generalize the error-message. But we can do even better: We re-use the error-message of the existing alphaNum-Validator (“Please use only letters and numbers”). This gives us the advantage, that there are localized versions available, so we don’t need to translate this error.

Second try:

FormValidator.add('alphaNumFix', {
	errorMsg: Form.Validator.getMsg.pass('alphanum'),
	test: function(element,props) {
		return (/^[a-zA-Z0-9]+$/).test(element.get('value'));
	}
});

Now about the requirement, that the username can’t be empty: Here we again re-use an existing validator, so our final “alphaNumFix”-Validator looks like this:

FormValidator.add('alphaNumFix', {
	errorMsg: Form.Validator.getMsg.pass('alphanum'),
	test: function(element,props) {
		return Form.Validator.getValidator('IsEmpty').test(element) || (/^[a-zA-Z0-9]+$/).test(element.get('value'));
	}
});

The test function now does this:

• Fail, if the element is empty (we validate this by re-using an existing validator)
• Do a regex test against the value (only letters or numbers)

Using custom validators

Assigning this validator to a field is very easy, simply add the validator name to the list of classes:

<input type="text" class="alphaNumFix minLength:3 maxLength:30" name="profile[username]" />

 

More about custom validators in part 3.

Comments/Feedback? Now collected in part 4 »