Hands-On: Dreamweaver CS3 SPRY Widgets for FORM Validation
In Dreamweaver CS3, they have added another way to validate your Form Fields. There is still the former Behavior for Validation, but this is a bit different and worth taking the time to investigate. I have introduced the notion of using CGI-BIN Scripts with Hidden Fields and how to validate using CGI. It will end up with you picking the way you like to do business when using Forms, that’s it. Here is a link to the Adobe Web site with help on Spry Widgets:
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS36577E31-2F93-4aa3-8DC0AE861D8C2ECA.html
The Spry Validation Text Field widget can detect a blank field and alert the person filling out the form that a name is required before the form can be submitted. Perhaps the field of importance to you is a number field, such as a ZIP code, telephone number, and such that you might need. After you have created a Form using normal Form Fields, you can go back and select which items will be using the Spry Widgets. (Or, you can start from scratch in a new Form.) For the sake of convenience, we will use an already created form. So within the body of a Form, select Insert > Spry > Spry Validation Text Field. You may also choose to use the Spry Validation Text Field icon on the Forms toolbar to accomplish this task.
Follow these instructions to start using Spry Validation Widgets on a Forms page. 1. Open your form named formElements.html and then save it as formElementsSPRY.html. 2. Select the Last Name field on the form and then select the Spry Validation Text Field icon shown above. 3. The Last Name text field will be replaced by a new Spry TextField; you will name this field lastName1 in the Spry TextField name box in the Property Inspector. Choose Custom from the Type selection box, since no other description matches our need at this time.
4. The required checkbox is already selected in the Property Inspector and should be left checked to make this text field a required field upon validation. 5. On the form in the red bordered box, you will see the words: “A value is required.” Please change that to a user friendly; Your Last Name is required. As you can see from the image below.
Professor Al Fichera
Page 1
FormSpryWidgetValidation.doc
Hands-On: Dreamweaver CS3 SPRY Widgets for FORM Validation
6. Now convert for Spry Validation is the ZIP code field. Select the Form text field named ZIP and then use the same technique to add the Spry validation. Name this one zip2.
7. On the form in the red bordered box, you will see the words: “A value is required.” Please change that to a user friendly; Please Type your 5-Digit Zip Code. As you can see from the image below.
8. The last item to use the Spry Validation will be the Email Field. Select the Form text field named Email and insert a Spry TextField. Name this one email2 in the Property Inspector. 9. On the form in the red bordered box, you need to change the text to: Please Insert your Email Address. As you can see from the image below.
10. Test the form by not filling in any information and then submit the form.
11. Fill in the form and then submit it and the Spry Fields will turn green on the form.
Professor Al Fichera
Page 2
FormSpryWidgetValidation.doc