Dreamweaver CS4 Form Validation Tutorial

This entry is part 15 of 18 in the series Dreamweaver CS4 Tutorials

In this Dreamweaver CS4 Form Validation Tutorial we will learn how to validate a form in Dreamweaver CS4.

The form we will validate is shown below:

Step 1: Select the form tag

You can do this by clicking anywhere in the form and selecting the <form> tag when it shows at the bottom of the document window. The entire form will grey out to show that it is selected.

Step 2: Open the Behavior Inspector

Open the Behavior Inspector (Window > Behaviors)

Dreamweaver CS4 Form Validation Tutorial

Step 3: Add the Validate Form Behavior

Click the “Add Behavior” icon (+ icon) and select “Validate Form”

Dreamweaver CS4 Form Validation Tutorial

Step 4: Specify the validation requirements for each form field

In the “Validate Form” Panel that opens select each field and specify the validation required.

Dreamweaver CS4 Form Validation Tutorial

In the example below I have given the following validation requirements:

name – Required, Anything

email – Required, Email Address

phone – Required, Number

Dreamweaver CS4 Form Validation Tutorial

Step 5: Click OK and check in the browser

Click OK when you are done with the validations.

Save your page and preview in the browser. Test by trying to submit the form without the required values. You should get an error message like the one shown below:

Dreamweaver CS4 Form Validation Tutorial