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.
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.
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.
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.
If you get a dialog box that mentions there are existing files, click "Yes" and allow them to be overwritten.
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.
After clicking OK, the list of the features in the newly installed extension will be displayed inside the extension manager console.
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.
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.
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.