DM 171: Week Twelve - Form Validation

Form Validation

Dreamweaver CS3 provides you with a couple of methods for form validation, “plain” javascript and Spry validation fields. These can give the user much quicker feedback than depending on server side validation.

Click on a tab to reveal its content…

  • Javascript Behaviors
  • Spry Validation Fields

Form Validation With Javascript Behaviors

Dreamweaver has a built in form validation behavior that is easy to use.

Dreamweaver Behaviors panel with add Validate Form selectedIn most instances, you will want to use this behavior with the Submit button of your form. Select the Submit button, go to your Behaviors panel. Click on the plus sign and choose Validate Form.

Dreamweaver brings up a Form Validation dialog box with choices for fields in your form which your user may effect. Choose the field you want validated and pick the appropriate options. In the graphic below, notice the choices of Required and Email to make sure the user submits a properly formed email address.

Validate Form dialog box

Form Validation in the Behaviors panelClick OK and you will see that Form Validation has been added to your behaviors panel with the event chosen as onClick. You may change the event if needed. Double click on the behavior icon to change its parameters.

This behavior will give a Javascript warning panel that appears in the browser. It has a generic appearance but works well. Give it a try.

On to the next tab…

Spry Validation Fields

Dreamweaver includes several Spry Validation fields to make your forms more interactive. Consider the needs of your targeted user before using Spry Validation fields; be assured that your users will have an appropriate browser.

Place your cursor where you would like your form field. From the insert menu, choose Spry > Spry Validation Text Field, Spry Validation TextArea, Spry Validation Checkbox, or Spry Validation Select depending on your needs. These options also appear on the Forms toolbar:
Forms toolbar
and on the Spry toolbar:
Spry toolbar

After the form accessiblity dialog box, you will have a Spry area designated by the blue tab in design view. When you select the tab, your properties inspector will allow you to select parameters including type:
Properties Inspector with Spry  validation area selected

Preview state of the field, choose the state and edit the text directly in design view:
Spry validation field preview states
You will note that the warning messages are contained within span tags in your code view and controlled by the style sheets.

You may also choose when to validate the field, submit is always checked by default:
Spry validation field when to validate choices
The type of field you are using will determine these choices.

The initial time you save, Dreamweaver will want to add to your Spry Assets folder; remember to upload them when you upload your project.

Up to the tabs…