Home arrow JavaScript arrow Page 7 - Form Validation with JavaScript

A Little Space - 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
Let's begin by setting up the class definition:

// create object
function formValidator()
{
// snip
}


Now, since I plan to build some basic error-handling routines into this class, I need to add a variable to hold this information.

// create object
function formValidator()
{
// set up array to hold error messages
this.errorList = new Array;
// snip
}


Let's now begin constructing the validation routines themselves.

Here's the first one, which performs a very basic test; it checks to see whether the corresponding variable contains a value or not.

// check to see if input is whitespace only or empty
function isEmpty(val)
{
if (val.match(/^s+$/) || val == "")
{
return true;
}
else
{
return false;
} 
}


This is fairly simple, but worth examining in detail, since all subsequent methods will follow a similar structure.

The isEmpty()method is called with a single argument: the value to be tested. It then uses the match() method of the JavaScript String object to check this value against a regular expression. In this specific example, the regular expression is designed to match a string consisting of spaces only; such a string can reasonably be considered "empty" of any actual data. If such a string is found, or if the value is found to contain nothing, the function returns true; if not (that is, if the value actually contains some data), the function returns false.

As you will see, this type of structure for the object method makes it simple to wrap the method call in a conditional test in your form processing script.

Let's move on to another interesting function:

// check to see if input is number
function isNumber(val)
{
if (isNaN(val))
{
return false;
}
else
{
return true;
} 
}


In this case, the JavaScript isNaN() function is used to check whether the value supplied to it is a number or not.

Another useful method, especially when dealing with numbers, is theisWithinRange() method, which provides an easy way to check whether the input is within a certain numeric range.

// check to see if value is within min and max
function isWithinRange(val, min, max)
{
if (val >= min && val <= max)
{
return true;
}
else
{
return false;
} 
}


Finally, you can include a small method to verify if a particular checkbox is checked or not, via the isChecked() method:

// check to see if form value is checked
function isChecked(obj)
{
if (obj.checked)
{
return true;
}
else
{
return false;
} 
}


Note the difference between this method, and the ones that preceded it. Previous object methods have been written to accept a form value as argument; this one accepts an object, representing the checkbox element, as argument.

 
 
>>> 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: