by Chris Barlow
Premier Members: Download the code
for this article
Registered Members: Download the code
for entire issue
Not a premier member?
The first Web browsers could only display formatted text and images from HTML. Although they could display an HTML form with fields like text boxes and check boxes, these forms were processed at the server, usually with Common Gateway Interface (CGI) programs or PERL scripts. Today's popular browsers include powerful scripting engines that allow many functions to be performed at the client side, saving the roundtrip over the network. As Dynamic HTML (DHTML) becomes more prevalent, you'll be able to develop powerful applications that run within the browser on the client. In the meantime, you can use scripting to take some of the load off the server and the network. Unless your Web pages are only accessed on an Intranet, where you can control the browser used, Java-Script is the only common scripting language you can count on.
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.
If you want to check more than the maximum length of a field, you'll need to add some form processing. Some processing needs to take place at the server. For example, checking to see if a user is registered in the user database, probably requires access to a database on the server. However, much of the field validation can take place on the client.
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: