logo

Modular Field Validation Script II

How many times have you found yourself writing JavaScript validation functions that look like this:

function validateFields(){
var frm = document.forms[0];
if (frm.FirstName.value == ""){
alert("You need to enter a First Name");
frm.FirstName.focus();
return false;
}
if (frm.LastName.value == ""){
alert("You need to enter a Last Name");
frm.LastName.focus();
return false;
}
if (frm.Email.value == ""){
alert("You need to enter an Email Address");
frm.Email.focus();
return false;
}
if (frm.Phone.value == ""){
alert("You need to enter a Phone Number");
frm.Phone.focus();
return false;
}
}
Look OK to you? Well I suppose it is really. After all, it does the job. However, if a pure-coder saw it they would probably moan that is not very modular. meaning that the same logic is repeated over and over. Not only that. If you wanted to add another field to the list then you have to use the same routine again. What if you want to change the wording on the alert message - you have to make the change four times!

Now look at the code below:
function validateField(fld, msg){
if ( fld.value == "" ){
alert( msg );
fld.focus();
return false;
}
return true;
}

function validateFields(){
var frm = document.forms[0];
if (!validateField(frm.FirstName,"You need to enter a
First Name"))
return false;
if (!validateField(frm.LastName,"You need to enter a
Last Name"))
return false;
if (!validateField(frm.Email,"You need to enter an
Email Address"))
return false;
if (!validateField(frm.Phone,"You need to enter a
Phone Number"))
return false;
return true
}
What we've done here is remove all the common code from each routine and place it in one single place in the "validateField" function. We then call this one function four times. There is still more code than needs be though. Let's use an array to make it more powerful/simple.
function validateFieldArray( flds ){
for (var i = 0; i < flds.length; i ++){
if ( flds[i][0].value == "" ){
alert( "You need to enter " + flds[i][1] );
flds[i][0].focus();
return false;
}
}
return true;
}

function validateFields(){
var frm = document.forms[0];
var flds = new Array();

flds[flds.length] = [frm.FirstName, "a First Name"];
flds[flds.length] = [frm.LastName, "a Last Name"];
flds[flds.length] = [frm.Email, "an Email Address"];
flds[flds.length] = [frm.Phone, "a Phone Number"];

return validateFieldArray( flds );
}
The function now builds an array where the first element of each entry is the field object that is required and the second is the message string. This array is then passed in to the "validateFieldArray" function. This loops through each element of the array and validates the fields one by one.

This is a simple explanation of the technique I used in my "Form Validator" database. In this case the JavaScript routines can handle the following field types:
  • Text Fields
  • Single-Select Boxes
  • Multi-Select Boxes
  • Radio Buttons
  • Check Boxes
  • File Uploads
As well as the following types of data:
  • Text
  • Dates
  • Date Ranges
  • Numbers
  • Number Ranges
  • E-mail Addresses
  • File Types
Download the database and take a look at how it works. Be WARNED though. This is not for the light-hearted. There is some serious JavaScript going on in here. Saying that though, there is nothing stopping you "plug and play" the code and use it in your applications - after all it is modular ;-)

Feedback

  1. Field Validation

    I have been using your field validation v2.0 ... it works great but I just ran into a new twist that I need to figure out.

    How would you add (multiple dependent fields).to your routine?

    I have a form with several yes/no radio buttons that need to have an accompanying field filled when the value of the radio button is "yes"

    doc=document.forms[0]

    if (doc.radio[0].checked == "1") { if(doc.field1.value=="" || doc.field1.value==null ) { alert( " Please enter Field1" ) ; } }

      • avatar
      • Jake Howlett
      • Tue 12 Jul 2005

      Re: Field Validation

      if (doc.radio[0].checked == "1") { flds[flds.length] = [doc.field1, "A Field Called 1"]; }

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Modular Field Validation Script I   Tracking changes to a form

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: fields; validate; form; modular;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »