 | ||
|
| ||
| ||
|
| ||
Brought to you by Inside Microsoft FrontPage, a ZD Journals publication. Click here for a free issue 
.
Web sites offer you a great opportunity to distribute information about your company or organization. But they're a great way to get information as well. Today, companies are using online registration forms to gather a wide variety of data about the people who visit their Web sites. In fact, some sites require you to fill out a form before you can even see any content.
Of course, online forms are only as good as the data they collect. So, it's important to validate the data people enter. Historically, Webmasters had to use server-side CGI scripts to validate input data. Now, however, Microsoft FrontPage 98 lets you validate data through a few easy-to-use dialog boxes. In this article, we'll show you how to add data-validation to your forms.
Put simply, validation is the process of making sure the user has completed all required fields on the form and that the data is in the right format. Validation doesn't guarantee that the information is correct -- the user could still enter Socks the Cat as his name -- but it does eliminate most data-entry errors.
Validation works on text-box fields, radio buttons, and drop-down menus. For text boxes, you can check the type of data (text, integer, or number), the data format, the data length, and even the data's value. For drop-down menus, you can force the user to select at least one item and check the number of items selected. Finally, for radio buttons, you can force the user to make a selection.
Since you set validation options by field, you can choose to validate only certain data. Doing so would let you require an entry in the E-Mail field, for example, while allowing the user to skip the Phone Number field.
In the browser, nothing happens until the user clicks the Submit button. Then, if any entry is invalid, a warning dialog will appear, alerting the user to the first invalid field. Once the user corrects that data and clicks Submit again, a warning dialog will appear for the next invalid field. If there are no more invalid fields, the submit script will finish running. Now, let's look at a practical example of validation.
For our example, we'll create a form to gather data for a company's mailing list. As Figure A shows, we'll gather the user's name and address and determine whether that address is a home or business address. In doing so, we'll use all three types of validation that FrontPage provides.
To begin our example, create a new, one-page Web called validate in FrontPage Explorer. Double-click default.htm to open that page in FrontPage Editor.
At the top of the page, type Please complete the following form to add yourself to our mailing list. Then, press [Enter] a few times to add a little white space. You're now ready to begin the form.
To add the first field, click the One-Line Text Box button on the Forms toolbar. (If you don't see this toolbar, choose Forms Toolbar from the View menu.) Since a field can't do anything by itself, FrontPage also adds a Submit button and a Cancel button, as shown in Figure B. A broken line surrounds all three elements, indicating the form's boundaries.
Now, double-click on the text field to set up its attributes. When you do, the Text Box Properties dialog box will appear. Type FirstName in the Name field. The other settings are fine -- and we'll set the validation options later -- so click OK to close the dialog box.
Since you gave the field a name, you might have expected FrontPage to label it on the form. But you actually have to do that yourself. So, click just to the left of the field (but still within the form's boundaries) and type First Name. Then, press [Shift][Enter] to move the field down a line.
We can now add our other text fields. Click after the First Name field (but before the Submit button) and press [Enter] to add a blank line. Type Last Name, press [Shift][Enter], and click the One-Line Text Box button again. (Since we're adding a field to an existing form, FrontPage just creates the field this time -- no more buttons or borders.)
Double-click the new field, name it LastName, and click OK. Repeat this process to add Address and City fields. For each of these fields, change the Width In Characters setting in the Text Box Properties dialog to 40. Doing so will allow for longer entries. Press [Enter] after the City field. Your form should now look like the one in Figure C.
Next, we'll add a dropdown menu of states, using the standard two-letter abbreviations. (For this example, we're assuming U.S. addresses only.) To create this field, type State, press [Shift][Enter], and then click the Drop-Down Menu button on the Forms toolbar.
Double-click on the field that appears, and the Drop-Down Menu Properties dialog box will appear, as shown in Figure D. Name the field State, then click the Add . . . button to bring up the Add Choice dialog box. The first "choice" in our menu will actually be an instruction: "Select your state." So, type that instruction in the Choice field; then click the Selected radio button and click OK.
Now, click Add . . . again. Type AL (for Alabama) and click OK. Continue in this manner to add AR, AZ, CA, and CO. (For our example, there's no need to enter all 50 state abbreviations.) Finally, click OK to close the Drop-Down Menu Properties dialog.
We have just two more fields to go. We need another one-line text box for the zip code. Create it as you did the name fields, giving it a width of 10 characters.
Finally, we're going to add a group of two radio buttons, so that users can indicate whether the address they've given is a home or business address. Below the zip code field, type Is this your home or business address? Next, press [Shift][Enter] to move to the next line, then click the Radio Button button on the toolbar.
When you do, FrontPage will insert a radio button and position the cursor for you to add its label. Type Home. Press [Shift][Enter] once more, insert a second radio button, and label it Business. Press [Enter] to move the Submit and Reset buttons down a line.
FrontPage assumes that the radio buttons go together, so it puts them both in a group called R1, giving the first one a value of V1, the second a value of V2. What's more, the first button is automatically selected.
Let's change a couple of these settings. Double-click the first button and change its value to Home. Then, check the Not Selected radio button in the Initial State section of the dialog. By doing so, we'll force the user to choose one button or the other. Click OK, then double-click the second radio button; change its value to Business.
Our form is now complete, but it's not bulletproof. A user could still submit it with blank fields or invalid data. In the next section, we'll walk through the validation process.
We'll start setting up validation with the First Name field. Double-click that field. Then, in the resulting dialog box, click the Validate . . . button to bring up the Text Box Validation dialog shown in Figure E.
At this point, we have a couple of choices. We can force users to enter certain types of data (such as text characters), or we can simply force them to enter any data. We'll take the latter approach for this field. Leave No Constraints as the selection in the Data Type dropdown menu. Then, select the Required check box in the Data Length section.
Note that when you check this box, the Display Name text field becomes active. Type First Name in this field; this is the field name that will be used in any warning dialog boxes, as we'll see shortly. (If you don't enter a name, the warning messages will identify the field by its name in the previous dialog.)
Click OK twice to return to the page, then repeat the same procedure for the Last Name and Address fields. As before, we're simply requiring some input in the field.
For the City field, we'll be a little more demanding. We'll restrict the input to text characters, spaces, periods, hyphens, and apostrophes, which should account for any characters that might appear in a U.S. city's name.
Double-click the City field and click the Validate . . . button to access the Text Box Validation dialog again. This time, however, choose Text from the Data Type dropdown menu. Then, in the Text Format section, enable the Letters, Whitespace, and Other check boxes. Finally, in the Other text field, type .-'. Enable the Required check box, then click OK twice to return to the page.
Validation for the next field, State, is much different since State is a dropdown menu. Double-click the field, then click on the Validate . . . button. In the resulting Drop-Down Menu Validation dialog, shown in Figure F, you'll see just two check boxes and a text field.
Enable the first check box, Data Required, to force the user to make a selection. Enable the second check box, Disallow First Item, so that the user can't accidentally enter "Select your state" as his state. Enter State in the Display Name field, then click OK twice.
The Zip Code field is a one-line text field, so we'll set its attributes much as we did the City field. To do so, double-click on the field, then click the Validate . . . button. Again set the Data Type to Text (not Integer or Number, since a nine-digit zip code contains a hyphen). In the Text Format area, check Digits and Other; type a hyphen in the Other text field.
Select the Required check box, then enter 5 in the Min Length field (for a standard five-digit Zip code) and 10 in the Max Length field (for a nine-digit zip code including a hyphen). Type Zip Code in the Display Name field, then click OK twice to return to the page.
Validating the radio buttons is quite simple. Double-click either button and click Validate . . .. Select the Data Required check box, then type Address Type in the Display Name field. These settings apply to the radio button group, so you can leave the other button alone.
Your final result should look similar to Figure A. We've added some HTML formatting to improve our form's appearance.
To test your example, save the page and click the Preview In Browser button on the toolbar. After the page opens, immediately click the Submit button. When you do, the warning dialog shown in Figure G should appear, indicating that you must enter a value in the First Name field.
If you'd like, you can work through the form one field at a time, correcting an entry, then clicking Submit again. Once you've corrected all the fields, you'll see a confirmation page and the data will be saved to the file form_results.txt in your Web site's _private directory.
Validating form data is an important part of using online forms. By adding validation to your forms, you can cut down on data-entry errors and other problems. In this article, we've shown you how to validate form data with FrontPage.
Copyright © 1998 TheZD Journals, a division of Ziff-Davis Inc. The ZD Journals and the ZD Journals logo are trademarks of Ziff-Davis Inc. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Ziff-Davis is prohibited.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top