Section 18.5. Validating Form Input


18.5. Validating Form Input

Validating the input of a form means checking the fields of the form for technical errors before the browser submits them. Dreamweaver's Validate Form JavaScript behavior performs this feat admirably.

To attach the Validate Form behavior to your form, click anywhere along the red border of the form container. This selects the entire form. (You can also click the <form> tag in the Tag Chooser.) Then go to the Behaviors panel. If the Behaviors panel isn't open, choose Window Behaviors from the main menu. Click the plus button on the Behaviors panel and choose Validate Form from the menu that appears, as Figure 18-36 shows.

Figure 18-36. Choosing Validate Form from the Behaviors panel's plus button menu


When you do, Dreamweaver opens the Validate Form dialog box, as Figure 18-37 shows. Under Named Fields, select a field in the form and check the Required option if this field is required for submission. Then, under Accept, choose a value type. If the visitor doesn't type anything into this field or if the value doesn't match the required value type, then validation fails and the script sends an error message to the visitor. In Figure 18-37, the name, email, and description fields are all required, and the email field requires an email address.

Figure 18-37. Choosing required fields and setting their value types


TECHTALK

Validating the input of a form means checking the fields of the form for technical errors before the browser submits them.


HOTKEY

Press Shift-F4 to toggle the Behaviors panel.


TIP

You might consider marking required fields with an asterisk (*) on your page. You might even create an Advanced CSS style called label.required or something to that effect to change the appearance of the text labels of these fields, maybe by making them bold if the others are in normal type.


When you're finished, click OK, and Dreamweaver adds the behavior to your form. Test the validation script by previewing the page in a live browser window.



Dreamweaver 8 Design and Construction
Dreamweaver 8 Design and Construction (OReilly Digital Studio)
ISBN: 0596101635
EAN: 2147483647
Year: N/A
Pages: 154
Authors: Marc Campbell

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