Home arrow JavaScript arrow Page 9 - Form Validation with JavaScript

Under Construction - JavaScript

javascriptForm validation can help to reduce the amount of bad data that gets saved to your database. In this article, find out how you can write a simple JavaScript form validator for basic client-side validation, and learn a little bit about JavaScript OOP in the process as well.

TABLE OF CONTENTS:
  1. Form Validation with JavaScript
  2. Check Point
  3. Object Lessons
  4. Rock On
  5. Hammer Time
  6. How Things Work
  7. A Little Space
  8. Expressing Yourself
  9. Under Construction
  10. A Quick Snack
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 464
December 01, 2003

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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




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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: