Form Error Checking for MAT 113

Besides embarrassing the Curmudgeon in front of the entire class, failure to implement error checking on a Web form can present serious problems for users as well as site owners.

In the fire alarm example we went over, the only error checking on the form was to compare the two entries for the phone number, issuing an error message if they were different. This meant that if both entries were left blank, no error message would be generated; indeed, the user would receive a thank you message.

Of course, the Curmudgeon immediately ran home after class and fixed the form. The process took a while, while at the same time offering a good example of the sorts of questions raised by a Web form. Here is a snippet of the corrected code as it pertains to error checking:

Skip over the code mumbo jumbo

if (nameBox.text=="") {
errorMessageIns.errorText.appendText("No name has been entered. \n\n");
}

if (phone1.text!=phone2.text&&phone1.text!="") {
errorMessageIns.errorText.appendText("The two numbers do not match. \n\n");
}
if (phone1.text==""&&phone2.text=="") {
errorMessageIns.errorText.appendText("Please enter a phone number. \n\n");
}

if (foneLen<=6&&phone2.text!="") {
errorMessageIns.errorText.appendText("Please enter an area code along with a valid phone number.");
}

if (foneLen>=6&&foneLen<8&&phone2.text!="")>
errorMessageIns.errorText.appendText("Please enter an area code.");
}

Five possible errors are addressed in the corrected form. The first, nameBox.text=="", covers a name space left blank. That's the most you can do with such a situation. You can't spell-check a name.

The second, phone1.text!=phone2.text&&phone1.text!="", covers a typo in one of the two fields for phone number. What this line of code covers is a case where, If the text in the two phone fields do not match and the text in the first field is not left blank. In this case, as error message is generated.

The third, phone1.text==""&&phone2.text=="" is a case where the two phone fields have been left blank, generating an error message.

The fourth, foneLen<=6&&phone2.text!="", says, if the length of the phone number is less than or equal to six characters, and the second phone number is not left blank, an error message is generated. foneLen is a variable from elsewhere within the code, holding the number of characters entered into the first phone number field. Anything less than six cannot be a valid number. At the same time, we don't want to present this error message if the user has not entered anything into the second phone number field, which error has been covered in the previous case. Having both error messages showing would look stupid.

The fifth, foneLen>=6&&foneLen<8&&phone2.text!="", says, that if the phone number is greater than or equal to six characters but less than eight characters, and the second phone field has not been left blank, an error message is generated. In this case, the area code would be missing from an otherwise valid phone number.

The most important function of error checking is to ensure that all of the pertinent information is collected. A thank you is not generated until a valid submission has been made. At the same time, and of slightly less importance, is avoiding awkward error messages. If one of the phone number entries is valid while the other is blank, then an error message saying that the two fields must match, while not wrong, implies a certain inelegance in the coding.

In the case of the fire alarm, error checking is done with Actionscript within the Flash form. Other kinds of error checking are done on the client side by Javascript, such as SPRY web forms created with Dreamweaver. Error checking can also be done by a server-side script such as PHP.

It would require a sophisticated code generator to create the kind of error checking necessary for a phone number. Perhaps someone out there has thought of one. Most code generators use regular expressions to check for things such as a missing @ symbol in an email address. It is, however, quite likely that a custom Web form will require a custom-tailored script with error-checking to process it.

See also:

• The SPRY For Web Forms section of the archives.

Further reading:

• Validate e-mail addresses using PHP--a very thorough procedure, on Soaptray.
• Form Validation--Make Sure Your Forms are Filled In, by Jennifer Kyrnin, on About.com