WEB DESIGN GARAGE [Electronic resources]

Chapter 70. Validating Form Input

Even though you need server-side coding to process form data, you can use good old client-side scripting to review the visitor's submission before it goes to the Web server. This process is called validation, and it's a very good idea for most types of forms.

A validation pass helps to prevent errors, both intentional and accidental, from confusing or crashing the server-side code that eventually receives the form data. Say your form asks visitors to supply an email address so that the server-side form handler can send out a confirmation email. Obviously, you need the visitor to supply an email address, or the server-side code won't work right. If someone out there gets clever and tries to leave the field blank or types in something other than an email address, the validation script catches it and asks for a correction. Of course, the visitor could still supply an invalid email address, but at least the validation script screens out a good chunk of potentially bad data.

Any validation script requires close coordination with the structure of the form. And since no two forms are alike, there's no such thing as an all-purpose, one-size-fits-all validation script. For this reason, the Toolkits in this topic aren't like the others in this book, in that you don't just copy the code to your Web site. You start with the Validation Script Skeleton instead, and then you pick from the rest of the Toolkits, adding the validation features that you need for your particular form.

[View full width]

<script language="JavaScript"> /* If you're adding this script to an external JavaScript file, you don't need the script tags at the beginning and end of this listing. If you're embedding the script on a Web page, make sure it's the same page that contains the form. */ function validateForm() { /* Add components from the other Toolkits here. */ return true; /* Assuming the form data passes all validation checks, the above command gives the go-ahead for the browser to submit the form to the Web server. */ } </script>

You need one more thing besides this framework for the validation function: a form that runs the script upon submission. Add the onSubmit event to the form tag, like so:

[View full width]


<form name="formname" action="formaction" method="formmethod"
 onSubmit="return validateForm();">

Of course, you should insert the appropriate values in the name, action, and method attributes for your particular form.

[View full width]

var email = new String(document.formname.textfieldname.value); /* In the line of code above, insert the name of the form and the name of the text field that contains the email address. This statement creates a variable called email to hold whatever the visitor typed in the field. */ if (email.indexOf("@") == -1) { /* The statement above checks to see if the field contains an at-sign (@). If it doesn't, the validation script assumes that whatever the visitor typed isn't an email address. */ alert("You must supply a valid email address."); /* The statement above displays an error message in a popup window. */ document.formname.textfieldname.select(); /* The statement above selects the email field of the form. */ return false; /* The statement above cancels the form submission. */ }

[View full width]

var field01 = new String(document.formname.requiredfield01.value); var field02 = new String(document.formname.requiredfield02.value); var field03 = new String(document.formname.requiredfield03.value); var field04 = new String(document.formname.requiredfield04.value); var field05 = new String(document.formname.requiredfield05.value); /* The above statements create variables for each of the required text fields in your form. If you have fewer than five, omit the lines you don't need. If you have six or more, just add lines to the script, using these as a template. */ var pass = true; /* The line above creates a Boolean (true/false) variable called pass and sets it to true. */ /* The if/then blocks below check to see if the visitor has filled out each required text field. If the script comes across a missed field, pass equals false. You need one if/then block per required text field, so adjust these according to your particular form, removing unneeded blocks or adding extra ones. */ if (field01.length == 0) { pass = false; } if (field02.length == 0) { pass = false; } if (field03.length == 0) { pass = false; } if (field04.length == 0) { pass = false; } if (field05.length == 0) { pass = false; } /* The following block of code tests the value of the pass variable. If pass equals false, which is to say if at least one of the required text fields is blank, then the browser displays an error message and stops the submission of the form. */ if (pass == false) { alert("You must fill out all required fields."); return false; }

TOOL KIT

Checking Required Lists and Menus

Add this block of code to the validation script to check that the visitor has filled out all required lists and menus.

The code assumes that your list or menu begins with a preselected default option like this:

<option selected>Choose an option...</option>

You can change the Choose an option... text between the option tags to match your specific form. Just make sure you also change the text as it appears in the following code:

[View full width]


var list01 = document.formname.requiredlist01;
var list01Text = list01.options[list01.selectedIndex].text;
var list02 = document.formname.requiredlist02;
var list02Text = list02.options[list02.selectedIndex].text;
var list03 = document.formname.requiredlist03;
var list03Text = list03.options[list03.selectedIndex].text;
var list04 = document.formname.requiredlist04;
var list04Text = list04.options[list04.selectedIndex].text;
var list05 = document.formname.requiredlist05;
var list05Text = list05.options[list05.selectedIndex].text;
/* The code above creates new variables for the required lists
 and menus in your form and gets the text of the selected option
 in each. If you have fewer than five lists or menus, delete the
 lines that you don't need. If you have six or more, add new lines.

The line below creates a new variable called pass and sets its
 value to true. */
var pass = true;
/* The if/then blocks that follow make sure that none of your
 required lists or menus still show the default option. If at
 least one list or menu does, the value of pass becomes false. You
 need one if/then block per required list or menu, so delete the
 blocks you don't need, or add similar blocks if you need more
 than five. */
if (list01Text == "Choose an option...") {
pass = false;
}
if (list02Text == "Choose an option...") {
pass = false;
}
if (list03Text == "Choose an option...") {
pass = false;
}
if (list04Text == "Choose an option...") {
pass = false;
}
if (list05Text == "Choose an option...") {
pass = false;
}
/* The if/then block below checks the value of pass. If false,
 the form doesn't submit. */
if (pass == false) {
alert("You must fill out all required fields.");
return false;
}

[View full width]

var field = new String(document.formname.fieldname.value); /* The code above creates a new variable for the value of the field in question. Replace formname with the name of the form and fieldname with the name of the field that you want to check. The line below creates the variable called pass and sets its value to true. */ var pass = true; /* The next block of text creates a for/next loop. The script looks at each character in the field and decides if this character is a letter or number. If not, the value of pass becomes false. */ for (var x = 0; x < field.length; x++) { if (field.charCodeAt(x) < 48 || (field.charCodeAt(x) > 57 && field.charCodeAt(x) < 65) || (field.charCodeAt(x) > 90 && field.charCodeAt(x) < 97) || field.charCodeAt(x) > 122) { pass = false; } } /* Now, if pass equals false, the browser displays an error message, deletes the value of the offending field, and automatically selects this field so that the visitor can try again. */ if (pass == false) { alert("Your entry contains characters other than letters and numbers."); document.formname.fieldname.value = "; document.formname.fieldname.select(); return false; }

[View full width]

var password = new String(document.formname.passwordname.value); var retype = new String(document.formname.retypename.value); /* The code above creates new variables for the values of the password field and the retype field. Replace formname with the name of the form, replace password name with the name of the password field, and replace retypename with the name of the field where the visitor retypes the password. */ if (password.valueOf() != retype.valueOf()) { alert("Your password fields don't match."); document.formname.retypename.value = "; document.formname.passwordname.select(); return false; } /* The if/then block above compares the value of password with the value of retype. If they don't match, the browser displays an error message, clears the value of the retype field, selects the password field, and stops submission. */

[View full width]

if (document.formname.checkboxname.checked == false) { alert("You must agree to proceed."); return false; } /* The if/then block above looks to see if the checkbox is checked. If not, the browser displays an alert message and stops submission. Replace formname with the name of the form, and replace checkboxname with the name of the "I Agree" checkbox. */