16.3 Using Form Controls

The Validate Form, Jump Menu, and Jump Menu Go behaviors are used with forms, as first discussed in Chapter 3.

16.3.1 Form Validation

The Validate Form behavior validates the type of data entered in form text fields (to use this behavior, the document must contain at least one form with at least one text field). Typically, you'll attach the behavior to the form's Submit button and trigger it using the onClick event (which is the same as attaching it to the Form itself and triggering it with the onSubmit action).

Applying the behavior in the Behaviors panel opens the Validate Form dialog box, shown in Figure 16-3.

Figure 16-3. Validate Form behavior parameters

Table 16-2 explains the options in the Validate Form dialog box. The Notation column lists the abbreviations shown after each text field in the Named Fields list, which indicate the validation settings for that field. For example, the notation ( RisMail ) indicates a required email address and ( NinRange3:10 ) indicates an optional number between 3 and 10.

Table 16-2. Validate Form options

Control	Definition	Notation
Named Fields	This field displays a scrolling list of text fields in the form. Highlight a text field from the list and set the remaining options. You can validate multiple text fields with one instance of the behavior.	N/A
Required	Enable this checkbox to force the user to enter a value for the text field. The space character alone is sufficient to meet this requirement.	R = required; N = not required
Anything	This option allows any type of input.	N/A
Email Address	This option requires the field to include an @ character preceded and followed by at least one other character. It does not check for a valid email address.	isEmail
Number	This option limits user input to valid numbers . Permitted characters include 0-9, plus (+), minus (-), decimal point (.), parentheses ( ), and percentage (%). Leading and trailing spaces are allowed. A plus (+) or minus (-) is allowed as the first character only. Commas are not allowed. For example, "+123.456", "5%", "(15)" and "-987" are allowed, but "123-456-7890", "6.5.4" and "123,456" are not.	isNum
Number from...to...	This option is similar to the Number option, but also requires that the field contain a numeric value within the specified range (inclusive). Negative and floating-point numbers are allowed. The first number must be less than the second number (specify a negative range as -5 to -1, not -1 to -5).	inRange Min : Max

If an error is found during validation, the browser displays an error message indicating the name of the text field and the nature of the problem.

Give your text fields meaningful names because the text field name is displayed in the error message. Set the text field names before applying the behavior because the behavior won't update automatically if you change the text field names .

You'll typically validate all text fields at once by applying the behavior to the Submit button. If the text fields are not validated successfully, the form's contents are not submitted to the server. (The user can remedy the situation and resubmit the form, however.)

If you prefer to validate individual fields as the user enters data into the form, apply the Validate Form behavior to a text field and trigger it with the onBlur event. However, this method is not entirely reliable. If the validation fails, the browser does not force focus back onto the problematic field, and thus allows the user to continue with the rest of the form, even if a field is invalid. Therefore, you should validate the form data again when the Submit button is clicked.

Validating other types of form objects, such as radio buttons , is usually unnecessary because most objects constrain user input by nature. But Dreamweaver doesn't offer a built-in way to require, for example, that a user select an option from a pop-up menu. For this and other more advanced forms of text field validation, such as limiting the number of characters in a text field, search the Dreamweaver Exchange for the keyword "validate." At the Exchange you'll find behaviors that do such things as validate phone numbers. Server-side scripts can also perform form validation and return an error message to the browser, if necessary.

16.3.2 Jump Menus

In Chapter 3, we saw how to insert a jump menu by using Insert Form Objects Jump Menu (or by using the Jump Menu tool in the Objects panel's Forms category). With our new understanding of behaviors, we can see that when you insert a jump menu, Dreamweaver inserts a List/Menu object and attaches the Jump Menu behavior to it. If you enable the Insert Go Button After Menu option in the Insert Jump Menu dialog box (see Figure 3-18), Dreamweaver also inserts a button form object and attaches the Jump Menu Go behavior to it.

Understanding jump menus in this way allows us to create them by hand and edit existing ones. You can convert any List/Menu object into a Jump Menu by applying the Jump Menu behavior to it manually. (The Jump Menu behavior is available in the Behaviors panel only when a List/Menu object is selected.)

When you apply or edit the Jump Menu behavior, Dreamweaver opens the Jump Menu dialog box, shown in Figure 16-4. Although it is very similar to the Insert Jump Menu dialog box seen in Figure 3-18, it lacks the Menu Name field and the Insert Go Button After Menu checkbox.

Figure 16-4. Jump Menu behavior parameters

Use this dialog box to modify the attributes of an existing Jump Menu (double-click an existing Jump Menu action in the Behaviors panel to edit its attributes). You can change a Jump Menu's name by selecting the corresponding List/Menu object and editing its name in the Property inspector (this name is used to associate a Go button with the menu). You can also edit the list values in a Jump Menu by clicking the List Values button in the Property inspector, as seen in Figure 16-5. List values can also be accessed by right-clicking (Windows) or Ctrl-clicking (Macintosh) on a List/Menu element and choosing the List Values option from the contextual menu.

Figure 16-5. The Property inspector for List/Menu objects (jump menus)

You can add a Go button to an existing menu by attaching the Jump Menu Go behavior to a button object. Actually, the Jump Menu Go behavior can be applied to any object, provided that a jump menu already exists within the document. To avoid confusion, you should apply the Jump Menu Go behavior to a button near the List/Menu that acts as the jump menu.

To add a Go button to an existing jump menu that lacks a Go button:

1. Ensure that a jump menu (i.e., a List/Menu object with the Jump Menu behavior attached) exists.

2. Insert a form button by using Insert Form Objects Button (or by using the Button tool in the Objects panel's Forms category). By default, Dreamweaver creates a Submit button.

3. Select the newly created Submit button and open the Property inspector, as shown in Figure 16-6. In the Property inspector, set the Action to None and change the Label to "Go" or "Do It!" You can also edit an existing Go button in this way to change its label. Be sure to use a meaningful label.

4. Using the Add Behavior (+) pop-up menu in the Behaviors panel, apply the Jump Menu Go behavior to the button.

5. In the Jump Menu Go dialog box, shown in Figure 16-7, select the Jump Menu's name from the Choose Jump Menu pop-up list (which shows only List/Menus with the Jump Menu behavior applied).

Figure 16-6 shows the Property inspector as it appears when a Go button is selected.

Figure 16-6. The Property inspector for button objects

Figure 16-7 shows the Jump Menu Go dialog box, which appears when the Jump Menu Go behavior is added or edited.

Figure 16-7. The Jump Menu Go dialog box

A web page (or a form) can contain more than one jump menu and more than one Go button.