Dreamweaver MX 2004 Extensions

1. In Dreamweaver, create a new folder called Ch9 inside the cfbook folder. Create a new file called checkform.cfm within this folder.

2. Open checkform.cfm in Design View and insert a new form into it (click the Form button in the Forms tab of the Insert bar). Name the newly created form surveyForm (enter the name into the Properties panel, as shown in Figure 9-4).
   
   
   Figure 9-4. The Dreamweaver Properties panel, showing the details of the new form
   
   
3. Enter the text What is your preferred ColdFusion Book? into the form.
   
4. Now click on the Radio Group button in the Forms tab of the Insert bar to open the Radio Group dialog box. Fill it in as shown in Figure 9-5, and click OK.
   

   
   Figure 9-5. The Dreamweaver Radio Group dialog box  

   A radio button group should now be inserted on the page for you.

5. Below it, type the text If ‘Other’, please specify:. Below this, insert a blank text field into the form by clicking on the Text Field button in the Forms tab of the Insert panel. Name it otherField.
   
6. Lastly, insert a Submit button by clicking on the Button icon in the Forms tab of the Insert panel and save your file. Your survey form is ready, and should look like the one shown in Figure 9-6.

Figure 9-6. Our finished survey form

Now it’s time to add JavaScript validation to the form by using Jaro’s Check Form behavior. Select the <form> tag (displayed as <form#surveyForm>) from the tag selector on the bottom bar of the document window (as shown in Figure 9-7) to select the entire form.

Figure 9-7. The tag selector for the current page

From the Behaviors panel, click on the + sign and choose Yaromat -> Check Form. The Check Form dialog box will open, as shown in Figure 9-8.

Figure 9-8. The Yaromat Check Form dialog box, showing the choices available for our first radio button

Now, with surveyRadio[0] selected, click the radio button labeled “one of them” and enter Please choose a book in the Error Message field.

Next, select surveyRadio[1], click the radio button labeled “This must be filled,” and choose otherField from the pop-up menu (which should be the only field available in the pop-up menu anyway). Enter Please specify a title in the Error Message field and click OK.

Looking at the Behaviors panel, you will notice that the Check Form behavior has been applied to the onSubmit event of your form, which is usually the best place to apply client-side form validation. If you now look in Code View, you will see that JavaScript code has been added to your page to validate form entries.

Test the form in a browser. Now if you try to submit the form without making any choice, the “Please choose a book” error message will be displayed, and if you choose the Others radio button without specifying a title for it on the text field, the “Please specify a title” error message will pop up. Fairly impressive, isn’t it?