Macromedia Dreamweaver 8 for Windows & Macintosh

Dreamweaver behaviors do some checks on how users complete forms. You can make certain fields required, check to make sure that a user has entered a value in a required field, or check to make sure that the user entered the correct type of information in a field.

With the Validate Form behavior you can set parameters for an entire form. You can also use the Validate Form behavior on individual fields. See Chapter 10, "Using Forms and Fields," for more information about making a form with Dreamweaver.

To validate a form:

1.

In the document window, select the Submit button.

or

Select the <form> tag from the tag selector.

2.

On the Behaviors panel, click plus and select Validate Form. The Validate Form dialog will open ( Figure 12.23 ) and display the fields:

  • Named fields: Select the first field in the box.

  • Required: Select this if the user must enter data in this field in order for the form to be accepted.

  • Anything: Check this radio button if any combination of text and numbers is acceptable.

  • Number: Check this if you want the user to enter a zip code, phone number, or other strictly numerical data.

  • Email address: Choose this if you want to check for an @ symbol within the entered data.

  • Number from: Select this if you need to check for a number within a specified range.

Figure 12.23. One form validation option is to require an email address from the user.

3.

Select the remaining fields in the Named fields box and set the parameters for each until you have completed the dialog for each field in the form.

4.

Click OK to accept your changes.

Tips

  • You can also select an individual form field and add a validate form behavior. The dialog is the same but the event handler (that's the real name for those fields on the Behavior panel) is different. Check the Behaviors panel to be sure it's the correct event ( onBlur or onChange ) when setting validation parameters field by individual field. Be careful with this method, because it can get annoying to a user who wants to skip certain questions and come back to them later. Saving the validation for last, when the user finally clicks the Submit button, is a better idea.

  • When a user enters something incorrectly or neglects to fill in a required field, a JavaScript alert box similar to Figure 12.24 pops up with a message about the error.

    Figure 12.24. The user sees an alert if the form validation requirements aren't met.

  • It's good practice to give users an explicit cue when a field is required. An asterisk next to a required field is a common visual cue, along with a note to the user that the asterisk denotes a required field. You may have colorblind users, so merely formatting the required field labels in a different color isn't considered adequate.

  • The Dreamweaver behaviors for validating forms are different from the server-side scripts used to handle submitted information. The same validity checks on user data you add with Dreamweaver should also be done with server-side scripts. Why both? The server-side checks are necessary because not everyone has JavaScript. The client-side JavaScript checks added here are also useful because they give faster feedback to users.

Related

Категории