Introduce scripting to your repetoire with Web page
One of the most common problems facing an interactive developer is validation of form data. Are the required fields filled in? Are they filled in with the correct formats? Do the fields make sense when compared to other fields on the form? Standard HTML only allows minimal validation to limit the maximum length of a text field. For example, the simple form below has a single text field with a display length of 35 characters and a maximum length of five characters. The browser won't let you enter more than five characters in the field:
Note that this form is good only for testing since it has no submit button or form action to return the contents of the field to the Web server.
To ensure that the e-mail field is not blank, add the code in the onSubmit event using the not equal operator (!=) and comparing the value property of the e-mail field to a null string. Finally, add a Name property for the text field and a standard Submit button:
If you click the Submit button without making an entry in the e-mail field, the statement in the onSubmit event evaluates to False. The form will not be submitted, the form action will not be called, and the OK message box will not appear. If you make an entry in the e-mail field, the statement returns True when you click the submit button and you will see the message box (see Figure 1).
Obviously, this simple example only works for a single field. To evaluate the fields on a form you'll need to call a function in the onSubmit event. Change your code to call a function called "Validate" and pass a pointer to the form with the this argument:
If you split the validation process into several functions you'll be able to develop generic routines to use with all your forms. The main Validate function, called in the onSubmit event, will call several generic functions for the different fields on your form, starting with the CheckEmail function. The entire form will be passed to the Validate function, but you will only pass individual fields to the generic functions.
The CheckRequired function, which receives a single field as an argument, checks the length of the field and, if it is zero, displays a message box and uses the focus method of the field to set the entry cursor to that field. Note the slightly different form of the If statement used in this function. When the If statement is True the return statement is executed and no more lines of this function are executed. When the If statement is False processing "falls through" the rest of the statement and simply returns True. One of the things I like about programming is that there are many ways to solve the same problem. However, when you code a function you need to consider how to make it easy for others to understand:
Another common validation is ensuring a field is a particular minimum length. This function is similar to CheckRequired. But the MinLength function demonstrates passing multiple arguments to a function and creating an alert string of concatenated literals and a variable using the concatenation operator (+):
You may need to ensure that a field is in a certain format. For example, a United States federal tax identification number is either in the format of a Social Security number (111-11-1111) or an Employer Identification Number (11-1111111). It would be nice to have a function to validate the format of a tax ID field.
Add another field called "TaxID" with a maximum length of eleven characters to your form with this line of HTML:
You can also write a validation function to check one field on a form against another. For example, add two more fields to the form of type PASSWORD so that the browser displays asterisks for characters that are typed (see Figure 2):
Then write a CheckPW function that accepts two fields as arguments. Note you can call the MinLength function you have already written to make sure the password is at least five characters. Use the not equal operator (!=) to make sure the two fields agree, otherwise return an appropriate error:
The neat thing about these field validation procedures is, since you are passing fields as arguments, they will work on any of your HTML forms. The only function you need to modify is the first Validation function so that it calls the appropriate field functions for the fields on the form (see Listing 1). Use the complete HTML page, form4.htm, as a basis for any additional validation that you need to perform.