stii.za.net » Blog Archive » mootools - simple field validation.

mootools - simple field validation.

Dec 12

We’ve looked at some very basic AJAX functionality and some basic effects using mootools, but what about something as basic as form validations?

I took my previous mootools example and added a validate function:

function validate(form1){

            if (form1) {

                if ($(’yourname’).value.trim() == “”) {

                    alert(”Name field cannot be empty”);

                    $(’yourname’).focus();

                    return;

                } else if ($(’yourmsg’).value.trim() == “”) {

                    alert(”Message field cannot be empty”);

                    $(’yourmsg’).focus();

                    return;

                } else {

                    aStiiFunction();

                }

            } else {

                if ($(’yourname1′).value.trim() == “”) {

                    alert(”Name field cannot be empty”);

                    $(’yourname1′).focus();

                    return;

                } else if ($(’yourmsg1′).value.trim() == “”) {

                    alert(”Message field cannot be empty”);

                    $(’yourmsg1′).focus();

                    return;

                } else {

                    aStiiFunction1();

                }

            }

        }

This form takes a boolean (true or false) parameter to differentiate between whether it should validate the top form (true) or the bottom form (false). If the form1 parameter is set to true, it then checks whether the yourname field and the yourmsg field is not empty. If it is not, it will submit the form using the AJAX function aStiiFunction();

What makes it so easy is that you can simply check the two text input fields by calling the element ID of either field and compare it, for example: if ($(’yourmsg1′).value.trim() == “”)

Now remember, this is very basic and simple. You can do some pretty serious regular expression checking using the same validation. But that, my friends is a story for another day!

Click here to see an example…

… and here to download the example.

technorati tags:mootools, ajax, javascript