Dreamweaver CS4 Form Validation Tutorial

This entry is part 15 of 19 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

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)

behavior-inspector

Step 3: Add the Validate Form Behavior

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

validate-form

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.

validate-form-fields

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

name – Required, Anything

email – Required, Email Address

phone – Required, Number

validate-form-fields2

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:

form-error-message


Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4
  19. How to validate your Contact PHP form in Dreamweaver CS4
Series Navigation Forms in Dreamweaver CS4Tables in Dreamweaver CS4

Tags:
Posted in Dreamweaver | No Comments »