Dreamweaver Article

Building a contact management application using Adobe Dreamweaver Developer Toolbox – Part 2: Validating contact information

Check e-mail and phone: Using the Validate Form server behavior

When adding data in a table through HTML forms, you have no way to control what the user enters. Now, with Developer Toolbox's Form Validation feature, you can define specific rules for each form element.

When managing contacts for a company or person, you want to make sure that the contact person is added correctly: with a valid e-mail address and phone number. Form validation allows you to add rules for the e-mail and phone fields. If JavaScript is enabled in the browser, the check takes place on the local machine, saving a round-trip to the server.

To add these rules, you will have to follow the instructions below. First off, open the contacts' insert page.

The Validate Form server behavior should be listed among existing server behaviors in the current page since it is automatically added by any wizard (even if no validation rules were specified when applying the wizard). In case you followed the exact steps when creating the page, then you will need to edit that server behavior to add validation rules to your page. To edit the Validate Form server behavior, you should locate it first in the list of server behaviors and then double-click it. (If the Server Behaviors tab is not visible, you can open it from Window > Server Behaviors.)

Note: If the Validate Form server behavior is missing from the page (most probably you have used Insert Record Transaction instead of Insert Record Form Wizard), then you will have to apply it manually before continuing. To access it, click on the Plus (+) button of the Server Behaviors tab, and then select Developer Toolbox > Form Validation > Validate Form.

The Validate Form dialog box will open using the Basic tab by default (see Figure 1). The Advanced tab is of no interest at this time, as all necessary options are located in the first tab.

Figure 1.  "Validate Form" server behavior

In the Column grid, all fields that have a form element counterpart are displayed. Beside the name, the submit type, the required state, and the validation format are displayed. You'll have to select each field to modify from the grid, and only then use the fields below to modify its rules.

To add validation for the e-mail address and phone number:

1. Select the email_con field from the grid. Add the following rule:

   • The e-mail address should be mandatory when entering contact details, so check the Required check box.
   • From the Validation Format drop-down menu select "E-mail Address". This will force the user enter addresses that respect the e-mail format: name@server.domain.
   • As different rules are set for listed fields, the grid updates automatically so it reflects the changes.

2. The second element to add validation rules to is the phone_con field. Select this field in the grid and follow the next steps:

   • The phone number should not be mandatory when adding a new contact, so the Required checkbox should remain unchecked.
   • From the Validation Format drop-down select Phone number. This way only phone numbers can be entered. If you need extra options, you can set a minimum and maximum number of characters that the user can enter so that the number is valid.
3. Next to the regular validation options, you can customize error messages for each field that has validation rules applied. Just select the fields from the grid check the Custom message checkbox and you can enter your own text in the Error message text field.

Once you're done defining the validation rules for the desired fields, click OK to apply the server behavior. You will notice some changes in how the page is displayed in browser, as some text will be shown next to each field that has a validation rule applied.

After ensuring that your users cannot enter bad information, you can take one more step to make your web application easier: learn how to automatically delete the contacts associated with a company, when the company itself is deleted, covered next.

Page 2 of 4

Previous Page

Next Page