Section 10.4. Validating Forms

10.4. Validating Forms

It can be frustrating to look over feedback that's been submitted via a form on your Web page, only to notice that your visitor failed to provide a name , email address, or some other piece of critical information. That's why, depending on the type of form you create, you might want to make certain information mandatory .

For instance, a form used for subscribing to an email newsletter isn't much use if the would-be reader doesn't type in an email address for receiving it. Likewise, if you need a shipping address to deliver a brochure or product, you'll want to be sure that the visitor included his address on the form.

Luckily, Dreamweaver provides a behaviora ready-made JavaScript programthat accomplishes this exact task. Called Validate Form, this Dreamweaver behavior alerts visitors when they haven't filled out a form properly. You can specify that a particular field can't be left blank, or that it must contain numbers only, or that it must contain a proper email address. If someone attempts to submit the form without the correct information, a small dialog box pops up identifying the mistake. No more blank forms!

Unfortunately there's a built-in limitation to this Dreamweaver behavior: you can only validate text fields . In other words, you can't check to see whether someone clicked a particular checkbox or made a selection from a pull-down menu. Nor can you see if she chose a file to upload or clicked a radio button. (For some more advanced solutions, see the box on Section 10.4.)

Nonetheless, the Validate Form behavior is a great tool for making sure you get the right information from your site's visitors. (Dreamweaver behaviors are discussed in depth in Chapter 11.)

To validate a form:

Select the form or a text field you wish to validate .

You can validate form fields in two ways: one field at a time or all fields at once.

The first option involves adding the Validate Form behavior to each text field you wish to validate. The form will check to see if the field contents are valid (using one or more of the criteria you set using the subsequent steps), after the visitor exits the field either by tabbing out of it or by clicking anywhere else on the page. In this way, you can validate a particular field immediately, as soon as your visitor has finished entering information into it. (Of course, if the visitor never clicks into the field to type, the validation never occurs, so it's usually a good idea to combine this with the option described in the next paragraph.)

If you choose to validate the entire form, no checking takes place until your visitor clicks the Submit button. At that moment, the browser checks all the fields you specified; an error message appears if any of them don't meet the criteria you've specified. To select a form, click its red dashed border or click <form> in the document window's tag selector.
Choose Window Behaviors .

The Behaviors panel appears.
On the Behaviors panel, click the + button; choose Validate Form from the menu .

The Validate Form dialog box appears, showing the names of all text fields in the form. In this box, you can set up validation criteria for any text fields in a form. For example, in Figure 10-14, the text field "name" must have a value in it; the field "email" is not required, but if the visitor does fill out this field, it must contain an email address.

Figure 10-14. If a form can be left blankthe Comments field, in this examplethere's no need to validate it. Don't turn on the Required checkbox, and make sure the Anything radio button is selected.
Select the field you wish to validate from the list .

You can click it with the mouse, or press the up and down arrow keys to highlight the one you want.
Turn on the Required checkbox if completing a certain field is mandatory .

Using the Accept radio buttons , choose one of the four validation types .

Anything accepts any valuenumbers, letters , or symbols.

Number means that only numbers will be accepted in the field. You might turn this option on, for example, for text fields labeled "How old are you?" or "How much do you weigh?"

"Email address" is for fields that require an email address. Note that this feature checks for the correct email address format , not for a valid email addressit can't go out on the Internet and determine whether or not your visitor is trying to fool you by typing in a bogus address. In fact, this feature only checks to see if an @ symbol was used in the field.

You can also specify a range of acceptable numbers using the "Number from" option by entering starting and ending numbers. Use this for questions on your form that run along the lines of, "Rate this service from 1 to 10."

As you go, Dreamweaver helps you remember your selections by adding a letter in parentheses after each field name in the dialog box. R means that a value is required; N means that the field can be left blank; isEmail means that the field should contain an email address; isNum means that the value should be a number; and inRange1:10 means the value must be a number within a certain range (in this example, 1 to 10).

EXTENSION ALERT
Advanced Form Validation

The Validation options Dreamweaver offers are rather rudimentary. The email validation option, for example, doesn't even really check for a correctly formatted email address; it just looks for at least one character followed by an@symbol followed by one more character.

You'll find many form- related extensions on the Macromedia Exchange Web site (see Section 19.2). Once you're on the Dreamweaver exchange page, perform a search for the word "validate." For example, you'll find three extensions by developer Massimo Foti. With these add-ons to Dreamweaver, you can check your form fields for Zip codes, phone numbers, Social Security numbers, and much more. You can also validate a form on the server, after your visitor has submitted it. This type of validation isn't instantaneous like JavaScript-based validation, but it's another common way to validate a form. It has the advantage of being more secureturning off JavaScript is one way to bypass Dreamweaver's built-in Validation behaviorand it lets you add error messages directly into the Web page. For example, it can be more elegant to return the form page to the visitor with all missing form information highlighted in red, bold letters. Section 22.1.2 lists some extensions for adding server-side form validation.

And if you're willing to spend some money, you can have both JavaScript and server-side validation with WebAssist's WA Validation Toolkit, available at www.webassist.com/Products/ProductDetails.asp?PID=33, which works with ASP, PHP, and ColdFusion Web pages.

If you're validating the entire form, select additional fields and add validation criteria, if you like.

Click OK to apply the behavior .

You return to your document window, where your fields are now ready to use and equipped to check themselves for accurate entries. To see if they work, press F12 (Option-F12) to preview the page in a Web browser. Try clicking the Submit button without filling out any of the text fields.

Figure 10-14. If a form can be left blankthe Comments field, in this examplethere's no need to validate it. Don't turn on the Required checkbox, and make sure the Anything radio button is selected.