Validate your form using MooTools

MooTools is a great JavaScript framework that allows you to write powerful JavaScript code with very little time and effort. Today I’ll show you just how simple it is to validate your forms using the MooTools “Form.Validator” class. Basically all you need to do is add a few classes to your form fields, include the MooTools “More” file in your website header and then initialize your Form.Validator.

About the Form.Validator class:

The Mootools Form.Validator class evaluates an entire form against all the validators that are set up, firing events when inputs fail validation. There are many built in validators including: isEmpty, required, minLength, validate-numeric, validate-alpha, validate-email and validate-url to help you validate your form. You can also create your own validators if you need to. These validators can very easily be added as classes to your form inputs in your HTML and before you know it your form will have validation.

Setting up MooTools Form Validation

As an example let’s say that you have a contact form that you want to validate. Your contact form has three fields; name, email address and message. You want to make sure that the user enters something into each field before the form can be submitted and you also want to make sure that the email address they enter is valid. Here’s how to setup your contact form in a few simple steps.

Contact Form HTML:

Below is a simple contact form with three inputs (name, email and message) and a submit button. Since I want all these inputs to be “required” inputs, I just add the “required” class to the inputs. The email address also needs to be checked that it is a valid email address, to do this I similarly add a “validate-email” class to this input. There are lots of other validators you can use too.

<form method="post" action="sendform.php" id="contact-form">

	<label for="name" >Name:</label>
	<input type="text" name="name" id="name" class="required" />

	<label for="email">Email Address:</label>
	<input type="text" name="email" id="email" class="required validate-email" />

	<label for="email">Message:</label>
	<textarea name="message" id="message" class="required"></textarea>

	<input type="submit" name="submit" value="Submit" />

</form>

Include the Form.Validator class:

The Form.Validator class is actually not part of the standard MooTools Core. As well as the core you will need to download MooTools “More”. You don’t need to download all of it, you can save some space by using the More Builder and simply checking the check box for the Form.Validator option. Once you have downloaded your “More” file you need to include it in your website head as follows:

<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>

Usage:

The last thing to do is initialise your Form.Validator so that your form will get validated. This is done by adding the following JavaScript to your website where “contact-form” is the ID of your contact form. If you already have a domready function then simply add the Form.Validator initialisation to your existing domready function.

window.addEvent('domready',function() {
    var myFormValidator = new Form.Validator($('contact-form'));
});

That’s it! Now just test out your form and you should see some error messages pop up.

Tags: form validation, mootools form, mootools form validation, validate contact form using mootools