Advanced Form Validations

Dreamweaver's built-in form validation

Dreamweaver's Validate Form behaviour checks the contents of specified text fields to ensure the user has entered the correct type of data. The Validate Form behaviour (listed on the Behaviour panel's Actions pop-up) can require, for instance, that some text must be entered into a text field or that the field can only contain numbers. If a user enters invalid data in certain fields, an error message will appear to inform the user of the incorrect entry. The behaviour 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 behaviour to an individual text field or to the form as a whole, consult the Using Behaviors chapter in the HELP...Using Dreamweaver part of the program. 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 behaviours 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 (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 behaviours 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 Validation behaviour to the <body> tag or the Advanced Validate Form behaviour to the <form> tag, you can quickly access the documentation. First click either the <body> tag or the <form> tag in the Tag Selector (under the document window) then double-click a form validation behaviour listed on the Behaviours panel. When the Form Validation dialogue 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 this:

C:\Program Files\Macromedia\Dreamweaver (UltraDev 4)\

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

1. Create your form in Dreamweaver. Give each form object a unique and meaningful name in the Property Inspector so that you will easily be able to identify it.
2. Select the <body> tag from the Tag Selector below the document window.
3. Choose WINDOW...Behaviors if the Behaviors panel is not already visible.
4. Click the + button on the Behaviors panel.
5. Select Advanced Form Validations from the Actions pop-up menu and then select the validation that you wish to use.
6. Select the field in the Named Field pop-up menu you wish to apply the validation to and then fill in other settings on the validation's dialogue box (see example below) as specified in the online help documentation.

The required OnLoad event appears by default in the Events column of the Behaviors Inspector (see example below). The event should not be changed.

Note: Click Help on the dialogue box to quickly access this documentation. The Advanced Form Validations overview has links to pages which specifically address the settings for the different validations.

7. Click OK.
8. Repeat steps 2 - 7 for each form field you wish to add a validation to.
9. Select the <form> tag from the tag selector (The Advanced Validate Form behaviour is needed for any page that performs an advanced form validation.)
10. Click the + button on the Behaviors panel.
11. On the Actions pop-up menu, select Advanced Validate Form (note this is different to Advanced Form Validation).
12. Fill out the Advanced Validate Form dialogue box (as specified in the "Preparing your Dreamweaver Document for Advanced Form Validations" section of the extension's online help documentation.)
13. 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 site: Yaromat


©grafikhaus 2015 | sheffield-central.com