TechNote (Archived)

Advanced form validations

Dreamweaver's built-in form validation

Dreamweaver's Validate Form behavior checks the contents of specified text fields to ensure the user has entered the correct type of data. The Validate Form behavior (listed on the Behavior panel's Actions pop-up menu) can require, for instance, that some text must be entered in a text field or that the field can contain only numbers. If a user enters invalid data in certain fields, an error message will appear (see Example 1) to inform the user of the incorrect entry. The behavior will also prevent the submission of the form to the server until the fields have been filled in correctly.

For more information about adding this behavior to either an individual text field or to the form as a whole, consult the Using Behaviors chapter in the manual, Using Dreamweaver. (You can also use the online help by choosing Help > Using Dreamweaver. Enter "Validate Form Action" in the Search engine to quickly find the Validate Form section.)

Using the JavaScript Integration Kit for Flash 5 extension to validate Dreamweaver forms

Additional form validation behaviors can be added to Dreamweaver by downloading and installing the JavaScript Integration Kit for Flash 5 from the Macromedia Exchange. This extension contains several advanced form validations which check field entries such as credit card numbers, zip codes, and dates (as illustrated below).

Despite the Flash-oriented name of the extension, several of the advanced form validations will work for forms created in Dreamweaver. In fact, two of the behaviors are specifically designed for use with HTML forms: the Radio Button Validation and the Selection Made in List validation. With the extension, you can also write your own error messages for the validations. This TechNote provides steps to add the extension's advanced form validations to your Dreamweaver form.

Help documentation for the advanced form validations

The JavaScript Integration Kit for Flash 5 extension installs its own HTML help system which can be viewed with a browser. Once you have created your form and added the Advanced Form Validations behavior to the <body> tag or the Advanced Validate Form behavior to the <form> tag, you can quickly access the documentation. First click either the<body> tag or the <form> tag in the tag selector (lower left-hand corner of the Document window), then double-click a form validation behavior listed on the Behaviors panel. When the form validation dialog box appears, click Help. This will launch the introductory page for the help system. The path to the help system on your hard drive will probably be similar to the one below:

C:\Program Files\Macromedia\Dreamweaver (UltraDev 4)\
Configuration\Shared\webassist\help\fdk\flash_dw_extension.html

Note: Within the help system, the important help documents to review are: "Advanced Form Validations overview" and "Preparing your Dreamweaver document for Advanced Form Validations." Although the documentation was designed for users who developed their forms in Flash, many of the instructions are still applicable to Dreamweaver forms. Especially helpful are the instructions for specific validations.

Applying advanced form validations

Below are the basic steps for attaching advanced form validations to a Dreamweaver-created form:

Create your form in Dreamweaver. Give each form object a unique name in the Property inspector so that you will be able to easily identify it for validation.
Select the <body> tag from the tag selector in the bottom left corner of the Document window.
Choose Window > Behaviors if the Behaviors panel is not already open.
Click the Plus (+) button on the Behaviors panel.
Select Advanced Form Validations from the Actions pop-up menu and then select the validation you want to use.
Select the field in the Named Field pop-up menu you wish to attach a validation to and then fill in other settings on the validation's dialog box (see Example 2), as specified in the online help documentation. The required onLoad event appears by default in the Events column of the Behavior inspector (see Example 3). The event should not be changed.

Note: Click Help on the dialog box to quickly access this documentation. The Advanced Form Validations overview has links to pages which specifically address the settings for the different validations.
Click OK.
Repeat Steps 2 - 8 for each form field you wish to add a validation to.
Select the <form> tag from the tag selector. (The Advanced Validate Form behavior is needed for any page that performs an advanced form validation.)
Click the Plus (+) button on the Behaviors panel.
On the Actions pop-up menu, select Advanced Validate Form (note that this is different than Advanced Form Validations). Example 4 displays this behavior's dialog box.
Fill out the Advanced Validate Form dialog box (as specified in the "Preparing your Dreamweaver document for Advanced Form Validations" section of the extension's online help documentation).
Click OK.

Additional Information

In addition to the JavaScript Integration Kit for Flash 5 extension, other form validation extensions can be downloaded from the Macromedia Exchange. Enter the key words "validate" or "form validation" in the Exchange site's Search box to review lists of available extensions.

For more details on installing extensions, please refer to Adding extensions to Dreamweaver.

Other advanced form validation extensions are available on the following Web site: Yaromat.

Note: Although links to external Web sites are provided as a resource, the Web sites are not part of Macromedia. Pages will open in a new browser window.