I explained in my previous piece in the form validation series how to create a simple form and incorporate several validation rules for the HTML form text fields, including an email address field in “Form Validation: Create a simple form.” This portion of the series concentrates on extensions available for Dreamweaver and will specifically review the installation for the Check Form extension which creates JavaScript coding within the HTML document; and, it adds a more robust client side form validation process along with the featured ability of modifying you own error messages.

While the native Dreamweaver Validate Form Behavior is an easy and quick way to set up validation rules, it does have limitations to usage within form text fields only. While the rules can be applied to single and multi-line text fields, the checks performed by the validation rules are quite basic, such as checking for the presence of an “@” symbol within an email address form field, or for the presence of number characters within telephone fields. For a more robust client-side validation of HTML form elements, an extension plug-in tool is available from Adobe that allows further checking. The Check Form extension available for Dreamweaver is a free downloadable plug-in type tool that allows far more advanced client-side validation for web forms.

If you are a veteran JavaScript programmer, then you could just code your own cutting edge form validation routines and be on your way, but if you don’t have the time to learn or hack your way through extensive programming, you will save a lot of time with the installation of the Check Form extension. The Adobe Extension Manager is typically included as part of all Adobe Suite applications, and it can be updated if needed. You can easily install new extensions and manage the ones you already have with the Extension Manager, which is also available for download, and it runs alongside most Adobe Creative Suite applications, and handles installing, managing, and deleting the extensions. Adobe Extensions are enhancements which “plug-in” to Adobe applications adding unique functions, coding, features and tools, and they end with the “.xmp” file extension, which stands for Adobe Extension Package. Before you install any extensions you should always check for the compatibility with the version of the application you are using, not all extensions work with every version of Dreamweaver.

Downloading the extension

Adobe Extensions for Dreamweaver are available by download from the Dreamweaver Exchange website and while many extensions are free, many do have a price or fee. Several of the extensions are developed by Adobe; however, many are created by third-party development teams whose extensions have met the required testing and have passed acceptance before being made available for download. Upon clicking the download button you will be asked to create a free Adobe account or log in with an existing account before the file downloads.

Figure A

Dreamweaver Exchange

The Check Form extension, which is a free download, is available in Windows OS format only. Save the file to your designated location. I like to keep all my extensions in a folder structure such as D:\SWArchive\Extensions\Dreamweaver. As long as you know where your files are organized, it does not really matter where the download files are saved, just as long as you know where to access them for the installation process.

Figure B

Check Form download page

Installing the extension

Once the extension file is downloaded you can either double-click on the file from your saved location to initiate the installation, or you can open up the Adobe Extension Manager (Commands | Manage Extensions…) from the Dreamweaver toolbar. Once in the manager console you click File| Install Extensions (Ctrl+O) and then browse to find the .xmp file, and click Install. Then the extension disclaimer appears; click Accept, to allow the extension to install.

Figure C

Extension disclaimer

If you get a dialog box that mentions there are existing files, click “Yes” and allow them to be overwritten.

Figure D

File overwrite dialog box

Be sure to shut down Dreamweaver after the extension is installed, and then restart it for the extension to be used.

Figure E

Installation successful

After clicking OK, the list of the features in the newly installed extension will be displayed inside the extension manager console.

Figure F

Read the extension information

Read this information carefully because it is not always obvious how or where to make use of every extension in Dreamweaver. Extensions often show up in out-of-the-ordinary places, and since the Check Form extension is a Behavior, it means that you must have the Behaviors panel open; you’re assigning the Check Form (i.e., validate form) behavior to some event such as the onSubmit event of the <form> tag.

After closing and restarting Dreamweaver, open up the extension manager, and you can then view the installed extensions, their version, type, and author within the list.

Figure G

Installed extensions

To verify that the Check Form extension actually exists in your Dreamweaver Behaviors panel, open up any web document file, then from the Behaviors Panel on the right sidebar be sure to click on the plus “+” sign (Add Behavior); look for Yaromat and Check Form should be listed.

Figure H

Check Form Behavior listed

The Check Form behavior is grayed out in the screenshot above because there is no open editable web document file; once an editable file is open then the behavior will be available.

The next segment of the form validation series will feature using the Check Form Extension in Dreamweaver, and we will create another simple form and then apply the Check Form validation features for an email address field, a drop-down menu, a set of radio buttons, check boxes, and a submit button. We will also add in manually created error messages and then test the form in a browser.