Form Validation with JavaScript - Under Construction

(Page 9 of 10 )

So that takes care of the basic validation routines. If these aren't enough for you, it's fairly easy to add new ones to the class, as per your specific requirements; just follow the template I've used above. All that's left now is to add some methods to take care of error messages in case a value fails its validation test.

The first of these is a simple little method named raiseError(), which allows you to add a human-readable message to the error stack. If you look at the very first schematic of how I designed this object to work, you'll see that this method is typically called if a validation test returns false. The method accepts an error message, which gets added to the error stack; this error stack itself is implemented as a regular JavaScript array. Look at the object constructor described previously to see its initialization.

// add an error to error list
function raiseError(msg)
{
this.errorList[this.errorList.length] = msg;
}

The numErrors() method returns the size of the "errorList" array; if the size of the array is greater than 1, it implies that one or more errors have occurred while validating the form data. Take a look:

// return number of errors in error array
function numErrors()
{
return this.errorList.length;
}

Now, numErrors() will only tell you how many errors have occurred; it won't show you the actual error messages. For that, you need the displayErrors() method, which returns the contents of the errorList array through a series of alert() boxes.

// display all errors
// iterate through error array and print each item
function displayErrors()
{
for (x=0; x


With the validation functions all created, the final step is to add them to the object constructor so that they can be accessed as methods of the formValidator object. Here's the revised object constructor…

// create object
function formValidator()
{
// set up array to hold error messages
this.errorList = new Array;
// set up object methods
this.isEmpty = isEmpty; 
this.isNumber = isNumber; 
this.isAlphabetic = isAlphabetic; 
this.isAlphaNumeric = isAlphaNumeric; 
this.isWithinRange = isWithinRange; 
this.isEmailAddress = isEmailAddress; 
this.isChecked = isChecked; 
this.raiseError = raiseError; 
this.numErrors = numErrors; 
this.displayErrors = displayErrors; 
}



… and here's what the final object code looks like:

// create object
function formValidator()
{
// set up array to hold error messages
this.errorList = new Array;
// set up object methods
this.isEmpty = isEmpty; 
this.isNumber = isNumber; 
this.isAlphabetic = isAlphabetic; 
this.isAlphaNumeric = isAlphaNumeric; 
this.isWithinRange = isWithinRange; 
this.isEmailAddress = isEmailAddress; 
this.isChecked = isChecked; 
this.raiseError = raiseError; 
this.numErrors = numErrors; 
this.displayErrors = displayErrors; 
}
// check to see if input is whitespace only or empty
function isEmpty(val)
{
if (val.match(/^s+$/) || val == "")
{
return true;
}
else
{
return false;
} 
}
// check to see if input is number
function isNumber(val)
{
if (isNaN(val))
{
return false;
}
else
{
return true;
} 
}
// check to see if input is alphabetic
function isAlphabetic(val)
{
if (val.match(/^[a-zA-Z]+$/))
{
return true;
}
else
{
return false;
} 
}
// check to see if input is alphanumeric
function isAlphaNumeric(val)
{
if (val.match(/^[a-zA-Z0-9]+$/))
{
return true;
}
else
{
return false;
} 
}
// check to see if value is within range
function isWithinRange(val, min, max)
{
if (val >= min && val <= max)
{
return true;
}
else
{
return false;
} 
}
// check to see if input is a valid email address
function isEmailAddress(val)
{
if (val.match(/^([a-zA-Z0-9])+
([.a-zA-Z0-9_-])*@
([a-zA-Z0-9_-])+
(.[a-zA-Z0-9_-]+)+/))
{
return true;
}
else
{
return false;
} 
}
// check to see if form value is checked
function isChecked(obj)
{
if (obj.checked)
{
return true;
}
else
{
return false;
} 
}
// display all errors
// iterate through error array and print each item
function displayErrors()
{
for (x=0; x<this.errorList.length; x++)
{
alert("Error: " + this.errorList[x]);
}
}
// add an error to error list
function raiseError(msg)
{
this.errorList[this.errorList.length] = msg;
}
// return number of errors in error array
function numErrors()
{
return this.errorList.length;
}
// end object



Next: A Quick Snack >>
 
More JavaScript Articles
More By Nariman K, (c) Melonfire

Comments On: Form Validation with JavaScript
 
>>> Be the FIRST to comment on this article!