| You can use Dreamweaver's Validate Form behavior to add JavaScript code to HTML forms, to make sure that user input is in the appropriate format or to ensure that form fields are not left empty. You can also control the input format without using validation by employing menus, lists, check boxes, and radio buttons so that the user has a limited number of choices. It's usually not necessary to validate every field in a form, but you may want to validate certain fields, such as e-mail addresses. In this section, we'll practice validating an HTML form by adding behaviors to validate the Name and City fields in the formparam.php page we created in the previous exercise. We'll add validation to make both fields required fields (so they can't be left empty). We'll also add an Email text field, and we'll add validation to make it a required field and to specify that the data in the field be in a format that is valid for an e-mail addressthat is, it must include an "at" (@) symbol. When the user clicks the Submit button to submit the form data, an error message will display and the form data will not be submitted if the form doesn't validate as specified in the validation behaviors that we'll be adding to the form objects. To validate an HTML form: 1. | Open the Formparam.php page you created in the last task, and save it as Formvalidation.php.
| 2. | From the Insert menu, select Form > Text Field to add a text field to your page.
| 3. | In the Design view window, select the text field.
| 4. | In the Property inspector, enter a name in the text field. For this exercise, we'll enter the name Email, since we're going to use it for the visitor's e-mail address.
| 5. | In the Design view window, select the entire form.
| 6. | In the Tag Inspector panel group, click the Behaviors tab to access the Behaviors panel.
| 7. | Click the plus button and select the Validate Form behavior (Figure 8.51).
Figure 8.51. Select Validate Form from the Behaviors menu. 
The Validate Form dialog appears (Figure 8.52). All of the named text fields are included in the list and are available for validation.
Figure 8.52. You can add validation to any named text field in the Validate Form dialog. 
| 8. | In the Named Fields list, select the Name field.
| 9. | In the Value section check the Required box to make the Name field a required field. In the Accept section, select the Anything radio button to accept any form of alphanumeric input in this field.
You can select another field in the Named Fields list without closing and reopening the Validate Form dialog.
| 10. | In the Named Fields list, select the City field. Repeat Step 9 to make the City field a required field and accept any alphanumeric input.
| 11. | In the Named Fields list, select the Email field.
| 12. | In the Accept section, select Email Address to validate this field as an email address.
When the Submit button is clicked, this field will be checked to make sure it includes the "at" (@) symbol.
| 13. | Click OK to close the dialog and save your changes.
The behavior appears on the Behaviors panel (Figure 8.53). It will be applied when users click the Submit button on the page.
Figure 8.53. After you add a behavior, the event and behavior are displayed on the Behaviors panel. 
| 14. | Save the file and preview the page in a browser. If you click the Submit button without entering any input, an alert message displays with a list of errors, and the form data is not submitted (Figure 8.54).
Figure 8.54. The browser displays an alert message with a list of errors when a form does not validate. 
|
 Tips
You can also validate individual text fields one at a time, rather than validating the whole form. In Design view, select a text field. On the Behaviors panel, click the plus button and select the Validate Form behavior. In the Validate Form dialog, select the text field and complete the dialog. The behavior will be used with an onBlur event rather than an onSubmit event, so the validation occurs when the user moves away from the field rather than when the form is submitted. Additional validation options include checking that input is numeric, and checking that numeric input is within a certain range of numbers. If you know JavaScript, you can add additional validation to any form field by using the Call JavaScript behavior and entering the appropriate code in the Call JavaScript dialog, or by adding the JavaScript code by hand in Code view.
|
