- #24 Creating Jump Menus
- #25 Generating Forms
- #26 Inserting Form Fields
- #27 Testing Input with Validation Scripts
- #28 Connecting a Form to a Server Script
This chapter is from the book
This chapter is from the book
This chapter is from the book
#27 Testing Input with Validation Scripts
Spry tools in Dreamweaver CS5 make it easy to define forms with attached validation scripts. These scripts test form content before it is submitted to make sure certain rules are met; specifically in the case of the new Spry form fields, they require that a visitor fill in a form field before submitting the form.
For example, if you want to require that visitors fill in the Email Address field in a form before they submit it, you can place a Spry Validation Text Field in your form. The four how-tos in this chapter explain how to use these Spry validation widgets.
All Spry validation widgets generate JavaScript to allow a form field to test input before processing the form. They also generate new CSS files that contain the formatting that defines the color, background color, text format, and so on for the form field and for form field input.
To place a Spry Validation Text Field widget in a form, follow these steps:
- Within a form, select Insert > Spry > Spry Validation Text Field.
- A text field appears in your form. With the new text field selected, the Spry text field options are displayed in the Properties inspector.
- In the Spry Text Field box in the Properties inspector, enter a field name with no spaces or special characters (use alphanumeric characters). The field name is used to process data and is not displayed in a browser.
- By default, the Required check box is selected in the Properties inspector. Leave this check box selected to make the text field a required field.
- If you want to test data entered into the text field to meet validation criteria (for instance, the data must be in the form of an email address, a zip code, a URL, or a phone number), select one of those options from the Type pop-up menu in the Properties inspector (Figure 27a).
Figure 27a Choosing Email Address as the validation type.
- The Enforce Pattern check box makes it impossible for users to enter characters that do not conform to the validation rule. For example, if you define validation rules for a U.S. zip code and a user tries to enter a letter (like A), that character will not appear in the field.
- Use the Hint box in the Properties inspector to provide initial content in the text field (for instance, you might use youremail@email.com to suggest to users that they need to enter a complete email address).
- Choose when to validate the field entry from the set of Validate on check boxes. Use Blur to validate when a user clicks outside the text field. Select Change to validate as the user changes text inside the text field. Choosing Submit validates when the user clicks the Submit button in the form.
- The Preview States pop-up menu in the Properties inspector just defines what state is displayed in the Document window in Dreamweaver. The state that displays in a browser depends on whether the user conforms to or breaks the validation rules.
)
You can edit Spry validation rules at any time by selecting the turquoise Spry Text Field label and changing values in the Properties inspector.
Although validation scripts are most widely used for text boxes, they can be defined (in a way similar to the steps I just outlined for text boxes) for other form fields as well.