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

Figure 21.9 shows one of the sample HTML documents, which shows a partially filled-out form. Notice that the zip code and phone number have been formatted using a standard format. The data was not entered into those fields in that format—JavaScript functions were called to reformat and redisplay those fields in that standard format.

You should notice one other thing about Figure 21.9. Notice that the cursor is located in the Email field and that the status line of the Web browser window contains the text, “Please enter a valid email address (like foo@bar.com).” This is a way of providing context-sensitive help to your user with a JavaScript that sets the window.status property—and thus the contents of the current status line—to an informative string for the current field being entered. This is done using the onFocus event of each <INPUT> tag, as shown here:

<INPUT TYPE=“text” NAME=“Email” onFocus=“promptEntry(pEmail)”
                                onChange=“checkEmail(this,true)”>

FIGURE 21.9  JavaScript can reformat your data to standardize the appearance of the information entered.

The onFocus event is triggered when the cursor enters the form field in question. When this happens, the preceding code calls the promptEntry() function, which is as follows:

function promptEntry(s) {
   window.status = pEntryPrompt + s
}

This function sets the status line to the passed string. (pEntryPrompt and pEmail are predefined global strings that, in this case, result in the status line shown in Figure 21.9.)

What about the other side of the equation? How does the entered information get validated? The onChange event triggers a call to the checkEmail() function, which is as follows:

function checkEmail(theField,emptyOK) {
   if (checkEmail.arguments.length == 1) emptyOK = defaultEmptyOK;
   if ((emptyOK == true) && (isEmpty(theField.value))) return true;
   else if (!isEmail(theField.value,false))
      return warnInvalid(theField,iEmail);
   else return true;
}

The checkEmail() function calls the isEmail() function with the contents of the Email field, which returns true or false, depending on whether it was found to be valid. If it was not valid, the warnInvalid() function is called, as shown in the following code, which displays the Alert box shown in Figure 21.10.

function warnInvalid(theField,s) {
   theField.focus()
   theField.select()
   alert(s)
   return false
}

FIGURE 21.10  The FormChek JavaScript routines display an Alert immediately when an invalid form field is found.

In addition to displaying the Alert box, warnInvalid() also does two other things: It moves the cursor to the field in question, using the theField.focus() method, and then selects the current contents of the field with theField.select(). This makes it easy for you to edit the contents of the field (see Figure 21.11).

The FormChek routines also include credit card validation functions that perform the same prefix, length, and check digit tests as those discussed earlier in this chapter. As shown in Figure 21.12, these routines are not quite as forgiving if you enter a valid number with the wrong card type.

When you attempt to submit the form, it calls a routine that checks to make sure that you have input valid data in all the required fields. If you have not, you get an alert box that tells you about the first such field, and the cursor is moved to that field (see Figure 21.13). When you have finally completed all required elements of the form correctly, you can successfully submit the form; in this sample program, the dynamically generated HTML document shown in Figure 21.14 results.

FIGURE 21.11  You can make it easy for your users to correct invalid fields by selecting the current contents.

FIGURE 21.12  If the credit card number you enter is not a valid number for the selected card type, you will receive this Alert box and be given the opportunity to re-enter the number.

FIGURE 21.13  You can easily make any field in your form a required field and require your users to enter valid data there.

FIGURE 21.14  Upon successful completion of the form, its data can be submitted for processing.