Home arrow JavaScript arrow Page 6 - Form Validation with JavaScript

How Things Work - 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'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 twocomponents:
  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
 

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: