Form Field Validation

Form field validation allows you to configure constraints on the data that is entered in to a form field. It can be as simple as requiring an entry with no other constraints on the data that is entered, or as complex as requiring data in a certain format.

FrontPage can perform validation by running code on the user's Web browser or by running code on the Web server. There is a tremendous benefit to performing validation on the client. If a user enters information that does not conform to the constraints you have configured, she will be presented with a message box indicating that she needs to correct her entry (see Figure 18.15) prior to the page being posted to the Web server. If you do validation on the Web server, the user has to wait for the page to be transmitted, wait for the Web server to process the form, and then wait for the Web server to send back an error page, as shown in Figure 18.16. She then has to click a link to go back to the form and try again. Validation on the client is a much better user experience.

Figure 18.15. Client-side validation makes it easy for your users to correct their data.

graphics/18fig15.gif

Figure 18.16. Server-side validation is not nearly as user-friendly. The user had to wait for this page.

graphics/18fig16.gif

Configuring Form Field Validation

To configure validation for your txtName form field, you will use the Text Box Properties dialog box.

  1. Open comment.htm.

  2. Double-click on the txtName form field to display the Text Box Properties dialog box as shown in Figure 18.17.

    Figure 18.17. The Text Box Properties dialog box is used to set the properties for the form field.

    graphics/18fig17.gif

  3. Click the Validate button to display the Text Box Validation dialog box as shown in Figure 18.18.

    Figure 18.18. Validation is configured in the Text Box Validation dialog box.

    graphics/18fig18.gif

  4. In the Display Name box, enter Name.

    NOTE

    When you set up validation, always make sure to enter a friendly name in the Display Name box. This is the name that will be used to refer to your form field in any validation errors displayed to the user of your Web site. If you don't enter a friendly name, the user might not know which field is causing a problem.

  5. In the Data Type dropdown, select Text.

  6. In the Data Length section, check the Required check box.

    NOTE

    When you specify that a text field is required, it is a good idea to restrain the number of characters that are allowed as well. Form input is a common way for hackers to send information to a Web server in an attempt to crash it. By restricting the amount of data that can be submitted from your form, your form will be more secure.

  7. In the Min Length text box, type 2. This will prevent users from supplying only an initial instead of their names.

  8. In the Max Length text box, type 30.

  9. Click OK.

  10. Click OK in the Text Box Properties dialog box.

  11. Save the page.

  12. Select Tools, Site Settings and click the Advanced tab as shown in Figure 18.19.

    Figure 18.19. The Site Settings dialog box allows you to configure what scripting language is used for validation in the browser.

    graphics/18fig19.gif

  13. Select JavaScript in the Client dropdown box.

  14. Click OK.

Now preview your form in the browser and leave the Name field empty. Enter some text in the Comments text box and click Submit. You should be presented with a message box indicating that you need to enter your name as shown in Figure 18.20.

Figure 18.20. A validation failure telling you to enter data in txtName.

graphics/18fig20.gif

Now when you fail to enter your name, the error will be more descriptive, such as the one seen previously in Figure 18.15.

Configuring Validation Options

The validation options available to you differ depending on what type of form field is selected. Let's look more closely at the Text Box Validation dialog box as seen earlier in Figure 18.18.

The Data type dropdown allows you to configure the type of data you will allow in the text box. The following options are available:

  • No Constraints The text box can contain any type of data.

  • Text The text box can contain text values. Selecting this option enables the Text Format options in the Text Box Validation dialog box.

  • Integer The text box can contain an integer value. An integer cannot have any decimal places. It must be a whole number. Selecting this option enables the Grouping options in the Text Box Validation dialog box.

  • Number The text box can contain a numeric value. Selecting this option enables the Grouping and Decimal options in the Text Box Validation dialog box.

The Text format section contains several check boxes to allow you to specify what type of entry is allowed when Text is selected in the Data type dropdown:

  • Letters Letters are accepted as valid characters. Letters must be A-Z or a-z.

  • Digits Numeric values are allowed. Only the characters 0-9 qualify. If a user enters 1,095 and Digits is the only check box that is checked, validation will fail.

  • Whitespace Spaces are allowed.

  • Other When checked, a text box is made available to enter any other characters that you want to allow.

Suppose that you had a text box field for someone's telephone number and you wanted to make sure that it was in the correct format. The first thing you would want to do is provide some indication to the user for what format you expect. You would then configure validation by setting the Data type dropdown to Text and checking the Digits and Other check boxes. In the text box for Other, you would want to enter a dash character, which is the separator used in phone numbers. If you wanted to allow for area codes in parenthesis, you would enter those as well, as shown in Figure 18.21. Any other character besides a number, the dash, an opening parenthesis, or a closing parenthesis would fail validation.

Figure 18.21. The Text Box Validation dialog box configured for validating phone number formats.

graphics/18fig21.gif

In order to avoid a phone number without an area code or one missing digits, you might also want to set a minimum and maximum field requirement. You know that a phone number formatted correctly will contain a total of 14 digits 2 for the parentheses, 2 for the dashes, and 10 for the phone number itself. The Data Length section of the Text Box Validation dialog box provides the perfect place to specify a size restriction on the data entered.

In the Data Length section, check the Required check box and type 14 in both the Min Length and the Max Length text boxes as shown in Figure 18.22. The phone number text box has now been configured to perform validation against the information entered in to it. It is also now configured as a required field. If nothing is entered in to it, validation will fail.

Figure 18.22. The Data Length section allows for restrictions on the length of the data and makes the text box a required field.

graphics/18fig22.gif

Collecting Phone Number Data

In a real-world scenario, you will probably be better off by using two separate text boxes in your form one for the area code and one for the phone number. There are many reasons why this is a better way to collect phone number data.

The area code portion of a phone number is often used to categorize information by geographical region. For that reason, you might want to collect the area code in its own field in a database or comma delimited file so that you can use it to keep track of the demographics of your users.

Area codes also change from time to time. In many cases, when an area code changes, the phone number remains the same with the exception of the new area code. If you are using a form to collect information about a particular group of people, it will help you to keep accurate records if you separate the area code so that you can easily update area codes when they change.

Make sure that you carefully evaluate your data collection methods when you are designing your site so that you don't add additional work for yourself later on.


The final section in the Text Box Validation dialog box, the Data value section, allows you to specify a valid range for the data entered in to the text box.

You might also want to collect data on what state your site visitors are from. A dropdown box is the perfect form field for this task. When using a dropdown box for the selection of a state, you would typically include an entry such as Select a State as the first entry. You would not, however, want the form submitted until the user selected a valid state from the dropdown.

Figure 18.23 shows the Drop-Down Box Validation dialog box. Here, you can once again specify the name to display for the form field. You are also provided with a check box to specify that the field is required and another check box to disallow the first choice. The Disallow First Choice check box is convenient if your dropdown has an item such as Select a State as the first choice. Because you would obviously want someone to click the dropdown and select her state instead of leaving it set to Select a State, you would want to check the Disallow First Choice check box.

Figure 18.23. The Drop-Down Box Validation dialog box is much simpler than the Text Box Validation dialog box.

graphics/18fig23.gif



Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net