|
|
 |
 |
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98
CHAPTER 21
Using JavaScript to Create Smart Forms
by Jim O’Donnell
- In this chapter
- Client-Side Form Validation 514
- HTML Form Text Field Validation and Formatting with JavaScript 514
- Verifying Well-Formed Credit Card Numbers 525
- Netscape’s Sample Form Validation Scripts 531
Client-Side Form Validation
One of the most common tasks for JavaScripting is to do form validation. Many Web applications need to gather input from users. Traditionally, this data is entered in the browser and then transmitted to the server. The server checks the validity of the data and either stores the data on the server or sends back a message requesting additional information or asking the user to enter valid data. Not only does this slow down your Web server, but it creates unnecessary Web traffic as well. With just a few lines of code, you can validate much of this data on the client’s machine and send it to the server only after it is complete. Of course, you still need to completely validate data on the server as well, because people still use browsers that either don’t support JavaScript or they have it turned off.
This chapter discusses ways of using JavaScript to make your HTML forms smarter. First, a few examples give you some ideas on how to use JavaScript to prefill, validate, and format HTML form elements. After that, the discussion focuses on how you can make sure a credit card number is well formed—obviously, it is not possible to truly validate a credit card number at the client, but it is possible to determine whether the number is a valid format. Finally, this chapter reviews a couple of collections of JavaScript form validation scripts that are freely available on the Web. These should get you well on your way to adding form validation to your Web pages.
HTML Form Text Field Validation and Formatting with JavaScript
Listing 21.1 is an example of a traditional HTML page used to gather input from a user. Take a closer look at a few of the elements of this page.
Listing 21.1 Form.htm—An HTML Document \Using a Standard HTML Form
<HTML>
<HEAD>
<TITLE>Forms Verification</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Credit Card Payment Information</H1>
<HR>
<B>All information must be entered before the form can be submitted...</B>
<HR>
<FORM NAME="MyForm">
<TABLE>
<TR><TD>First Name:</TD>
<TD> </TD>
<TD><INPUT TYPE=TEXT NAME="FirstName" SIZE=21 VALUE=""></TD></TR>
<TR><TD>Last Name:</TD>
<TD> </TD>
<TD><INPUT TYPE=TEXT NAME="LastName" SIZE=21 VALUE=""></TD></TR>
<TR><TD COLSPAN=4><HR></TD></TR>
<TR><TD>Payment Date:</TD>
<TD> </TD>
<TD><INPUT TYPE=TEXT NAME="PayDate" SIZE=10 VALUE=""></TD>
<TD>(enter as mm/dd/yy)</TD></TR>
<TR><TD>Payment Amount:</TD>
<TD><B>$</B></TD>
<TD><INPUT TYPE=TEXT NAME="Amount" SIZE=10 VALUE=""></TD></TR>
<TR><TD>Credit Card Number:</TD>
<TD> </TD>
<TD><INPUT TYPE=TEXT NAME="CCNumber" SIZE=20 VALUE=""></TD>
<TD>(must be 13 or 16 digits long)</TD></TR>
<TR><TD>Expiration Date:</TD>
<TD> </TD>
<TD><INPUT TYPE=TEXT NAME="ExpDate" SIZE=10 VALUE=""></TD>
<TD>(enter as mm/dd/yy)</TD></TR>
</TABLE>
<HR>
<INPUT TYPE=SUBMIT NAME="MySubmit" SIZE=20 VALUE="SUBMIT INFORMATION">
</FORM>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
This HTML document, when viewed in Netscape Navigator, appears as shown in Figure 21.1.
FIGURE 21.1 You can use standard HTML Forms elements to set up a document for receiving user input.
The different elements of the HTML document, as shown in Listing 21.1, are as follows:
- • <FORM>...</FORM> tags—These are the container tags that must surround the HTML Forms input elements. The NAME=“MyForm” attribute is used to help identify the form from which that data came when the form is being processed. You might notice that neither the METHOD nor the ACTION attribute for the <FORM> tag has been sent. This is because this form is being used as an example. Normally you would set METHOD=POST, and set the ACTION to the appropriate URL of where on your Web server you want the data to be sent.
- • <INPUT TYPE=TEXT> tags—Each of these tags is used to receive one piece of information from the user. Each is named, using the NAME attribute, to enable the resulting data to be identified.
- • <INPUT TYPE=SUBMIT> tag—This tag puts the button on the form used to submit it. Like the other elements, it is named using the NAME attribute, and the VALUE attribute is used to customize the text appearing on the button.
- • See “Creating Forms,” page 234.
Scripting HTML Form Text Fields
HTML documents can include JavaScripts to perform a variety of client-side scripting functions to validate elements of the form before it is submitted to the Web server. Note that not all the form validation can be done at the client—for instance, for this example you would definitely need to validate the payment information at the server—but some of the simpler things definitely can be done.
Caution: This is meant to be an illustrative example designed to show some of the types of user input that can be validated using JavaScript at the client. It is not meant to be a realistic example of how to implement a Web-based payment system. If you want to do that, a lot of concerns exist with security and validation of payment information that are not addressed here. However, you can find some of this information elsewhere in this book.
A couple of ways enable you to validate the information entered into a form. For text fields, the best way to do it is as you go. By calling a JavaScript from the onChange method of the HTML Form text field, you can validate the data entered into a field any time it has changed. An example of the syntax used to do this follows:
<INPUT TYPE=TEXT NAME="PayDate" SIZE=10 VALUE=""
onChange="checkDate(document.MyForm.PayDate)">
|
)
){kind=link}