Form Validation with JavaScript - How Things Work
( Page 6 of 10 )

So that's the theory. Let's now spend a few minutes discussing the rationale behind the formValidator object I plan to build.

Stripped down to its bare bones, my formValidator object consists of two components:

1. A series of methods that accept the data to be validated as method arguments, test this data to see whether or not it is valid (however "valid" may be defined within the scope of the method), and return an appropriate signal.
   
   
2. A JavaScript structure (here, an array) that holds a list of all the errors encountered during the validation process, and a series of methods to manipulate this structure.

As you will see, these two basic components make it possible to build a very simple (and yet very useful) formValidator object, one that exposes a number of generic methods.

Now, before proceeding further, I need to decide how this class is going to work. Here's how I plan to use it:

// instantiate object
fv = new formValidator();

// perform checks
// check for empty field
if (fv.isEmpty(document.forms[0].elements[0].value))
{
	fv.raiseError("Please enter a value");
}

// check for field range
if (!fv.isWithinRange(document.forms[0].elements[1].value, 1, 99)) 
{
	fv.raiseError("Please enter a value in the range 1-99");
}

// if errors, display, else proceed
if (fv.numErrors() > 0)
{
	fv.displayErrors();
}

As you can see, once the object is instantiated, various object methods are called (with the appropriate form input value as parameter) to test whether the input is "good." If it isn't, an error is raised and stored in the object's internal error stack; these errors can be displayed at a later time, once all the validation is complete.

Once the basic functionality of the object is clear, it's a good idea to spend some time listing the important methods, together with their purpose. Here's my initial cut:

• isEmpty() - check whether the specified form variable is empty;
• isNumber() - check whether the specified form variable is a number;
• isAlphabetic() - check whether the specified form variable contains alphabetic data;
• isAlphaNumeric() - check whether the specified form variable contains alphanumeric data;
• isWithinRange() - check whether the specified form variable contains a value within the specified numeric range;
• isEmailAddress() - check whether the specified form variable contains a valid email address;
• raiseError() - add an error message to the error stack;
• displayErrors() - display the list of error messages as alert boxes;
• numErrors() - return the number of error messages generated so far.

These are the essential methods; there may be more, which I will add as development progresses.

>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire