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
- Text
- Dates
- Date Ranges
- Numbers
- Number Ranges
- E-mail Addresses
- File Types
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" ) ; } }
Reply
Re: Field Validation
if (doc.radio[0].checked == "1") { flds[flds.length] = [doc.field1, "A Field Called 1"]; }
Reply