Clientside validation for accessible forms with mootools

As we discussed in a previous article about forms -Basic copy-paste accessible contact form -  we made the form validation accessible using a class that will highlight and point to the elements that need to be filled or corrected in case the validation failed.

Now, the only weak point form the user’s point of view is the fact that we need to refresh the page every time he hits submit, this being somehow annoying. Nowadays most browsers offer a client-side processing capabilities ( javascript ) that can be used for local validation – avoiding the refresh of the page.

Don’t get me wrong. The server side part needs to remain intact for accessibility purposes. 

The last MooTools version offers a validation plugin in the mootools-more package, that will help us solve our task. Basically we need to add some classes to out inputs, to reflect the type of validation we want. For our form, we need only name – mandatory, and email –  mandatory + correct email formatting.

So we’ll use required and validate-email from the list of the validators already included, like this:

<label for="name"> Name <span> (required) </span></label>
<input  tabindex="1" type="text" name="name" id="name" class="required" />
<label for="mail"> Email <span> (required)</span></label>
<input  tabindex="2" type="text" name="mail" id="mail" class="validate-email required" />

The next step is to create the code that does the validation:

On the domready event of the window (we need to allow the html to load and therefore to be able to access it)  we attach the validator to our form with the methods needed to show the user what he did wrong (in case he did it). To keep the presentation and the accessibility intact – as in the back-end validation – we  will add the next code:

window.addEvent('domready', function(){
	var myFormValidator = new FormValidator($('contact'), {
		onFormValidate: function(ok) {
			$('error_wrapper').getElements('a').dispose();
			if (!ok) {
				$('contact').getElements('.validation-failed').each( function(el) {
					var a = new Element( "a",{'href' : "#add"})
                            .addEvent('click', function(){ el.focus(); return false; })
                            .set('text', el.get('id').capitalize() )
                            .inject($('error_wrapper'));
				})
 
				$('error_wrapper').setStyle('display','block');
			}
			else {
				$('error_wrapper').setStyle('display','none');
			}
		},
		stopOnFailure:true,
		evaluateFieldsOnBlur:false
	});
})

Ok, it’s a little long but basically it’s validating each field it needs to, as specified in the class, and attach in the error_wrapper the labels to the erroneous inputs.  It’s better to study the code and see exactly how it’s done.

Now, what is happening?

The MooTools library is validating each field we specified on the submit event of the form and adds by default a class validation-failed or validation-passed to each field that was submitted to the validation routine.

We can use these two classes to visually improve the form – here I just made the faulty ones red. If the validation failed the submit event of the form is stopped  and the incomplete data is not reaching the server.

Next step: to complete the correct data, and resubmit.

Here is the DEMO

The form validator class is more powerful than this so take a look at the documentation on the MooTools site.
Anyway, no matter what you do, do not forget to make the server side validation too. It is mandatory for your (server’s ) security.

3 thoughts on “Clientside validation for accessible forms with mootools”

Comments are closed.