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
  

Form Script Tutorial for MAT 113

FORMS are a way for Web site visitors to send data other than requests for display to a Web server.

For the purposes of out tutorial, we are going to ignore Dreamweaver entirely, looking instead only at the code. We will be making an email form--that is a form that generates an email containing the information submitted by the user. This email will be sent to an address that is put into the script.

When the browser parses HTML and comes to this string of characters, <form action, it is configured to interpret the rest of the code as part of a Web form until it reaches this string of characters, /form>.

The first part of the form contains administrative information telling the browser where to send the information, and by what method. Unless the Web server is configured otherwise, the name of the script file that will process the data must be at the end of URL. Two methods are commonly used to encode the data: GET and POST. GET encodes the data within the URL string, and is good only for short amounts of data. The POST method sends data within the body of the request. Normally you would have to configure this part of the form. However the method used in this tutorial will do that for you. The code shown below demonstrates the way you would usually code the form.

As with images, the URL for a Web form may either be relative to the Web page or be an absolute, or full, URL. In the code shown below, the URL is for a script called, form_handler.php.

<html>
<body>
<form action="form_handler.php" method="post">
Your Name: <input name="user" type="text" />
<br />
Your Email: <input name="email" type="text" />
<br />
<input type="submit" />
</form>
</body>
</html>

The code above produces the following on the Web form (The script does not exist, so submitting this form will do nothing.):

Your Name

Your Email




Web forms have a number of input methods, including the single-line text, shown above in the two text boxes. Others include radio buttons, check boxes, text areas (multi-line text input), passwords, and drop-downs. Additionally, a Web form can be used to upload and download files, and to populate data into a database. Information on these things is contained within the references at the end of this post.

The element that sends the form, <input type="submit" />, sends the form data in much the same way as a clicked link sends data over the Internet. When the data arrives at the Web server, a script is called up, to processes the data. Many different computer languages can be used to accomplish this, the most common being PHP.

Configuring a script is not a trivial matter. At the same time, a customized script is necessary to process the data. The Computer Science Department conducts classes, most notably CS116, on how to write scripts to process Web forms.

Fortunately, programs exist that write computer code. For the purposes of this tutorial, we are going to use an online code generator called, The Web Form Factory. This utility takes the Web page containing your form, along with a Thank You page, and converts them into a PHP script. It is important to note here that the Form Factory script actually replaces the Web pages. The information contained within your two HTML pages is assimilated into the script, which generates the respective Web pages at the appropriate time. Usually, the script is kept separate from the HTML page.

The Web Form Factory does not work the same way it used to. Some elements are missing from the pagkage that is returned. Or perhaps I am confused about the way it works. In either case, I have come up with a work-around so that the scripts will will work.

The PHP script created in this process will analyze submissions made by users, returning error messages if the forms are improperly filled out. For instance, a user may enter an email address without the @ character. When the script encounters an error, it will generate an error message to the replace the Web page containing the form on the user's computer. In order to implement this feature, you must include the following code on your Web page in the place where you want the error message to appear:

<wff:validation_errors></wff:validation_errors>.

After you have entered this code, follow the instructions on The Web Form Factory site. Select Email Form in step#2. After you have submitted your two HTML files, you will be prompted to download a Zip file containing the scripts. For some reason, the package of scripts is incomplete. To correct this, add these files to those that you upload to your server.

The PHP file containing your form will have the name form.YourFileName.php. You may change this file name to work with your site, but you must retain the php extension on the end. Links to this page must also carry the .php extension. You do not have to upload the original two HTML files to your site.

At the top of this file are three lines of code:

include_once("configuration.php");
include_once("wff_misc.php");
include_once("class.phpmailer.php");

The text will be slightly different. Copy and paste the code shown here above in place of the code in your file. When you upload your script, be sure to include the three files referenced in the same directory as the PHP file containing your form. The total number of files to upload will be four.

On lines 10 and 11, you should replace the placeholder text with your own information.

$mail->From = 'johnrobertlemon@yahoo.com';
$mail->FromName = 'John Lemon';

On line 14, insert the text that you want to appear at the top of your email message. The characters \n\n are code that will force two line returns.

$message = "The following was submitted to the Web form:\n\n";

In the file configuration.php, replace the placeholder text with the email address that you want to receive the report.

To review:

1. Create the Web page containing your form with the additional line of code, <wff:validation_errors></wff:validation_errors>.
2. Create a Thank You page.
3. Follow the instructions on the Form Factory site.
4. Change the configuration.php file included in the files returned from the Form Factory to include the email address that will receive the emails.
5. Change the main script as shown above.
6. Upload the files to your server.

We will go over these steps in class. Additionally, as time permits, we will discuss creating forms with Dreamweaver.

Further reading:

• The Web Form section of the archives.
• The PHP section of the archives.
  

See also:

• The files used in this tutorial.
• A series of video tutorials on Dreamweaver, including one on form creation, and one on creating a PHP file.
• Email Me Form, a free online form generator service for creating HTML forms, no programming required. It has a form wizard to design simple or complex forms to make a form mail script. After creating the Web form, you get HTML code to paste into your Web page. This process creates a script housed on their servers.
  

*