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.

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. Freelance PHP Programmer on July 26, 2010

      Its not a good idea to use javascript validation. Because this validation is happening at client side. So we cant make sure it is happening or not. If they disable javascript, validation will not happen. SO its better always use serverside validation.

    2. Cre8ive Commando on July 26, 2010

      Thanks for the comment. JavaScript validation is great for giving users instant feedback on their form inputs. I do agree with you that JavaScript validation should not be used alone but rather used alongside server side validation using PHP for example. This gives us the best of both worlds. 🙂

    3. Salsan Jose on July 29, 2010

      That is correct. In case of both side of validation, Javascript is useful to give instant validation message to users..

    4. haggiesm on September 23, 2010

      Hi there. Nice tutorial. You explain things very simply which is what most people look for I would guess. Please could you post a tutorial or article on php form processors? The only tutorials I can find are incomplete or too complicated and long.

    Trackbacks

    1. […] This post was mentioned on Twitter by Adham, Inv Amigo. Inv Amigo said: Validate your form using MooTools #webdesign http://bit.ly/cnGUVE […]


    0

    Have your say!