Performing full-featured form validations

Forms appear all over the web. However, they often lack one essential element: validation. Form validation is quite important for both web users and developers. Users are guided by receiving clearly stated responses to errors, whereas developers will find that validation keeps bad data out of the data source.

There are different kinds of form validation. Perhaps the most frequently applied type of validation is one that ensures that users fill out required fields correctly. Other validations specify which characters users can or cannot use in an entry, or ensure that users only enter data in a certain format (for example, mm/dd/yyyy for a date).

Adobe Dreamweaver introduced advanced validation using the Adobe Spry framework for Ajax in Creative Suite 3 and has enhanced its functionality for the Creative Suite 4 release. By and large, the Spry form validation objects are much more sophisticated and functional than the standard Validate Form client-side behavior, which was available in Dreamweaver since the very first release. With Spry form validation objects, you get a more robust set of checks and multi-state messaging. You can, for example, display different messages when a required field is omitted and when the incorrect data has been entered.

This article explores the general use of Spry Validation Form objects and the new form objects available in Dreamweaver CS4. You'll quickly get a grasp of just how powerful and easy to use the Spry Validation Form objects are.

Basic Spry form validation use

The form I validate in this article is a relatively simple one that includes four text fields (Name, Password, Confirm Password, and E-mail) and one check box (I agree), as shown in Figure 1. For this example, I'll start with the most basic use case and work up to more complex scenarios.

If I had to choose one word to describe the Spry form validation implementation in Dreamweaver, it would be elegant. To add a form element to the page—complete with validation and multi-level error messages—you simply drag and drop it in your HTML page. All customizations after insertion are made through the custom Property inspector or in the Document window itself.

Adding a text field

Follow these initial steps for adding Spry form validation objects to your page:

1. If you'd like to follow along, download and unpack the sample ZIP file that accompanies this tutorial and open the file form_start.htm.

   This starting point already includes a table within a <form> tag. I generally structure my forms with tables so I can quickly get a column of right-aligned labels adjacent to my form fields. Although you're free to use CSS to create the form structure, tables are valid for holding form data as well.

2. From the Forms category of the Insert panel (see Figure 2), drag a Spry Validation Text Field object into the second column of the first row. This will reserve the first columns for labels.

3. When the Input Tag Accessibility Attributes dialog box opens, enter the following:
   • ID: name
   • Label: Name:
   • Style: Attach label using 'for' attribute
   • Position: Before form element
   • Access key: n
   • Tabindex: 10

   I prefer attaching the <label> tag with the for attribute because I can then more easily move it to the first column of the table. You'll notice that Dreamweaver automatically adds a blue tab and border around the Spry object (see Figure 3), so you can quickly invoke the proper Property inspector by selecting it.

4. Place your cursor in the Name: label and, from the Tag selector, choose <label>. Drag this element into the first column, first row.
5. Now that the label is in place, establish the parameters for this text field's validation.
6. Hover your mouse over the text field until the blue Spry TextField tab appears and then click it.
7. In the Property inspector, make sure that Required is selected and select the Validate on Blur option.
8. All Spry form validation objects validate when the form is submitted, but by selecting the Blur option, you provide more immediate feedback to users.
9. From the Preview states list, choose Required to display the error message that appears when a required field has no entry. Change the default message to Please enter your name.

Adding an email field

A text field like this name field is perhaps the most basic of all validation: you're just making sure that some value was entered, because there is no set formula for a name. Now, bring in an email field that requires a specific format to be valid.

1. From the Insert bar, drag the Spry Validation Text Field into the second row, second column.
2. When the Input Tag Accessibility Attributes dialog box opens, enter the following:
   • ID: email
   • Label: Email:
   • Style: Attach label using 'for' attribute
   • Position: Before form element
   • Access key: e
   • Tabindex: 20
3. Select the <label> tag surrounding Email: and drag it into the first column.
4. Hover over the just-inserted text field and select the Spry TextField tab.
5. In the Property inspector, choose Validate on Blur and keep Required selected.
6. From the Type list in the Property inspector, choose Email Address.
7. Dreamweaver displays the Invalid format option in the Preview states list. The Preview states list dynamically changes according to the type of validation chosen; if you expand it now, you'll see four entries: Initial, Required, Invalid Format and Valid.
8. Change the Invalid Format error message to Please enter a valid email address (see Figure 4). From the Preview states list, choose Required and change its error message to Please enter your email address.

9. Save your page. Click OK to acknowledge the Copy File dialog box.
10. The first time you save your file after adding a Spry form validation object, the Copy File dialog box appears with all the Spry JavaScript and CSS files that will need to be put online. All files are located in the SpryAssets folder in your site root.

Adding a check box

Text fields are general purpose and will compose the bulk of your form elements. However, Dreamweaver also includes Spry form validation objects for other form elements, including select lists, radio buttons and check boxes. Next, add a check box to the form so you can see how that works.

1. From the Insert panel, drag a Spry Validation Checkbox into the second-to-last row, second column.

   I prefer to group name, email and password fields (to be added later in this article) together. Of course, you can order your form elements however you like.

2. In the Input Tag Accessibility Attributes dialog box, enter the following:
   • ID: agree
   • Label: I agree to the newsletter policy.
   • Style: Attach label using 'for' attribute
   • Position: After form element
   • Access key: i
   • Tabindex: 50

   Dreamweaver knows that the labels for check boxes typically appear after the element and this is the default choice for Position.

3. Hover over the just-inserted text field and select the Spry Checkbox tab.
4. In the Property inspector, keep the Required (single) radio button selected and choose Validate on Blur.
5. Although only one check box is used here, check boxes are often used in groups and you can set a minimum or maximum number with the Spry Validation Checkbox. It's important to remember that when including more than one check box in a Spry form validation group, every check box added after the initial Spry Validation Checkbox is a standard check box. Moreover, they must be included in the <span #sprycheckbox> tag with the Enforce Range (multiple) option selected.
6. From the Preview states list, choose Required and change the error message to Please select to get the newsletter.

The initial Spry form validation objects are in place. In the next section, you'll learn how to add two interrelated elements, with more sophisticated validation.

New capabilities in Dreamweaver CS4

Dreamweaver CS4 includes several new form elements to round out the validation possibilities. In addition to the Spry Validation Radio Group, which allows you to enter a collection of radio buttons, the Spry Validation Password and Spry Validation Confirm objects are also new.

The Spry Validation Password object is especially powerful and allows web designers to specify the relative strength of a password. You can, for example, not only set the minimum and maximum number of characters, but also the minimum/maximum of letters, numbers, uppercase characters and even special characters, such as #, ?, &, and %. Once a solid password matching your criteria has been entered, you can make sure the user has it right with the Spry Validation Confirm object, which checks the value entered in one field against another.

1. From the Insert bar, drag the Spry Validation Password into the third row, second column, just after the Email field.
2. When the Input Tag Accessibility Attributes dialog box opens, enter the following:
   • ID: password
   • Label: Password:
   • Style: Attach label using 'for' attribute
   • Position: Before form element
   • Access key: p
   • Tabindex: 30
3. Select the <label> tag surrounding Password: and drag it into the first column.
4. Hover over the just-inserted form element and select the Spry Password tab.
5. In the Property inspector, choose Validate on Blur and keep Required selected.
6. In the Min chars field, enter 6 and in the Max chars field, enter 12.
7. Note that every time you define a new validation requirement, a new entry is added to the Preview states list and a new error message made available (see Figure 5).

8. From the Initial states list, choose Required and enter Please enter a password with 6 to 12 characters.

You could continue to fine-tune your password requirements by entering values in any of the additional minimum/maximum fields. For this exercise, let's leave it as it is now and bring in the final Spry form validation elements, Spry Validation Confirm.

1. From the Insert bar, drag the Spry Validation Confirm into the fourth row, second column.
2. When the Input Tag Accessibility Attributes dialog box opens, enter the following:
   • ID: confirm
   • Label: Re-enter your password:
   • Style: Attach label using 'for' attribute
   • Position: Before form element
   • Access key: r
   • Tabindex: 40
3. Select the <label> tag surrounding Re-enter your password: and drag it into the first column.
4. Hover over the just-inserted form element and select the Spry Confirm tab.
5. In the Property inspector, choose Validate on Blur and keep Required selected.
6. From the Validate against list, make sure the following is selected: password in form "form1".
7. Dreamweaver is smart enough to know that, in most cases, you want to compare a previously inserted password value to the current field. However, you could just as easily use the Spry Validation Confirm object to compare an email address entry, so you'll find all the text fields in the current form listed and available for selection.
8. From the Preview states list, choose Invalid and change the error message to Please re-enter your password exactly.
9. Save your page and click OK when the Copy Files dialog box appears.

Each Spry form validation object includes a separate JavaScript and CSS file so you only have to upload the code you need. Should you need to remove any Spry object, Dreamweaver automatically removes the JavaScript include reference, so that file is not published as a dependent file.

Completing the form

With all the Spry form validation elements in place, there's just a bit more standard form work required. In this section, you'll add the Submit button and specify the form action.

1. From the Forms category of the Insert panel, drag a Button object into the final row, second column of the table.
2. When the Input Tag Accessibility Attributes dialog box opens, enter the following:
   • ID: submit
   • Label: [Leave blank]
   • Style: [Leave default]
   • Position: [Leave default]
   • Access key: s
   • Tabindex: 60

   A separate label is not needed for the Submit button as the button contains its own label, which can be easily modified.

3. In the Property inspector Value field, enter Sign me up.
4. All that's left now is to specify the form action. Many beginning web designers don't understand that any form required some sort of server-side component, whether it is a PHP page, a CGI script or a call to the email client. Unfortunately, you can't always depend on the latter option, so you'll need some sort of server-side processing to make it work. For the purpose of this exercise, I assume that you have a PHP page to handle the processing.
5. From the Tag selector, choose <form>.
6. In the Property inspector Action field, enter newsletter.php.
7. Save your page.

This might be a good time to test your page locally, which you can do by pressing F12 to preview it in your primary browser. If you want to see all the required error messages appear, press the Submit button without filling in any details. Refresh your browser page to start over and start to tab through the fields one at a time to verify that the Validate on Blur option was selected for all fields. Next, enter an improper address in the Email field or password with less than 6 or more than 12 characters to view those error messages.

Whenever you test your pages, it's always best to try every combination of data entry you can think of. If possible, set a web novice loose on your form. You'll quickly see how necessary form validations are—and how a full-featured approach to form validation is perfectly... valid.