19 January 2009
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.
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.
Follow these initial steps for adding Spry form validation objects to your page:
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.
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.
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.
<label>tag surrounding Email: and drag it into the first column.
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.
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.
Dreamweaver knows that the labels for check boxes typically appear after the element and this is the default choice for Position.
<span #sprycheckbox>tag with the Enforce Range (multiple) option selected.
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.
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.
<label>tag surrounding Password: and drag it into the first column.
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.
<label>tag surrounding Re-enter your password: and drag it into the first column.
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.
A separate label is not needed for the Submit button as the button contains its own label, which can be easily modified.
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.