Ryan Boudreaux follows up in his series on creating web forms and form validation with this post on using the robust features of the Check Form Extension for Dreamweaver.
In the previous segment of the form validation series, we installed the Check Form extension in Dreamweaver to add a robust client-side form validation process; if you have not yet read the series the first two parts are:
- Form validation: Create a simple form
- Form validation: Installing the Check Form Extension for Dreamweaver
In this segment, we will be using the Check Form Extension and all its robust features. The Check Form extension allows for validation of form elements other than text fields such as menus, drop-down lists, radio buttons, and check boxes, and it provides for a thorough validation of certain data types within text fields. For example, the Check Form Behavior performs a much more comprehensive evaluation of an email address because it not only checks for the presence of the "@" symbol, it also checks for proper language rules as in firstname.lastname@example.org. It can also search other data strings such as time formats, date strings, and a range of values. And probably one of the best features to come with the Check Form Behavior is the ability to define custom error messages. You get to code and write your own pop-up messages based on rules that fail the validation tests upon form submission.
Sample form with five elements
- Open Dreamweaver to a blank HTML web document.
- Insert a Form into the body of the document and name it CheckFormSample.
- First, we will create an email text field. Inside the opening <form> tag and at the line just below, type in Enter a valid email address: and then enter a line break (Shift+Enter) and then add an email text field on the line below within the form; from the Dreamweaver toolbar, select Insert | Form | Text Field and name it EmailAddress, then click OK to accept.
- Next we will create a set of radio buttons within one group. With the insertion point a few lines below the email <input> tag add the following phrase: Select one of the following three options: and then enter a line break (Shift+Enter) and add a radio group within the form; from the Dreamweaver toolbar, select Insert | Form | Radio Group and accept the default name of RadioGroup1.
- Update the labels Radio for each and label them Selection 1 and Selection 2, respectively. Update the values for each radio input type as Sec1 and Sec2 respectively. Click the + button to add an additional button and label it Selection 3, with a value of Sec3. Make sure the default layout is set to line breaks <br /> then click OK.
- In this next step, we will set up a drop-down menu list. With the insertion point a few lines below the radio button group type in Select from one of the following four options: and then add a line break (Shift+Enter). Place the insertion point a line below and select from the Dreamweaver toolbar, Insert | Form | List/Menu. Name it "SelectList".
- Within the <select> tag and at the line below add four <option> tags each with a value of 1, 2, 3 and 4, respectively, then label them Select One, Option A, Option B, and Option C respectively.
- Next, we will add in a series of check boxes. With the insertion point several lines below the drop-down menu list, type Select all that apply: then add a line break (Shift+Enter). Place the insertion point a line below and select from the Dreamweaver toolbar, Insert | Form | Checkbox, and name it CheckSelect1 with a value of 1. Add a line break (Shift+Enter), and then add three more checkboxes and name them CheckSelect2 with a value of 2, and so on until you have a total of four checkboxes.
- Next we will add in a submit button. With the insertion point several lines below the last check box, select from the Dreamweaver toolbar, Insert | Form | Button | Submit and then name it Submit.
- With five different form elements in the HTML document now is a good time to save the file.
The sample form code within the HTML document file should look something similar to this:
<form action="" method="get" name="CheckFormSample">
<p>Enter a valid email address: <br />
<input name="EmailAddress" type="text" />
<p>Select one of the following three options:<br />
<label><input type="radio" name="RadioGroup1" value="Sec1" id="RadioGroup1_0" />Selection 1</label> <br />
<label><input type="radio" name="RadioGroup1" value="Sec2" id="RadioGroup1_1" />Selection 2</label> <br />
<label><input type="radio" name="RadioGroup1" value="Sec3" id="RadioGroup1_2" />Selection 3</label>
<p>Select from one of the following for options:<br />
<option value="1" label="Select One"></option>
<option value="2" label="Option A"></option>
<option value="3" label="Option B"></option>
<option value="4" label="Option C"></option>
<p>Select all that apply:<br />
<input name="CheckSelect1" type="checkbox" value="1" /> 1 Checkbox Selection One <br />
<input name="CheckSelect2" type="checkbox" value="2" /> 2 Checkbox Selection Two <br />
<input name="CheckSelect3" type="checkbox" value="3" /> 3 Checkbox Selection Three <br />
<input name="CheckSelect4" type="checkbox" value="4" /> 4 Checkbox Selection Four
<p><input name="Submit" type="submit" /></p>
The five form elements included in this form sample are the text field for email address entry, the radio group, the drop-down menu list, the checkbox selections, and the submit button.
Applying the Check Form Behavior
We will now use the Check Form Behavior and apply the validation rules to the five form elements that we defined above. The Check Form Behavior can be found in the right side panel in Dreamweaver, and can be accessed from the Behaviors Panel | Add Behavior | Yaromat | Check Form.
1. In Dreamweaver highlight to select the entire <form> </form> code, then in the Behaviors panel make sure Show All Events is selected. Then select the onSubmit event, and then click the plus (+) to Add behavior. Select Yaromat, and then Check Form. The Check Form dialog box now appears. You should see the CheckFormSample in the left drop-down menu. If there were more than one form in the HTML document then you would see each of them listed in the form name drop-down menu.
2. With the CheckSelect1 highlighted, be sure the Checkbox Any is selected, and then in the Error Message section, type in the following or something similar: At least one selection must be made! Ensure this is the same setting for all the checkbox form elements.
3. Click on the RadioGroup1_0 form element in the menu list and be sure that One Of Them is selected, and then in the Error Message, add in something like Select at least one! While it is not necessary to add the same properties to all the other radio button elements, because of the nature of selecting at least one of them, you can add this for each of these radio button elements.
4. In the Check Form dialog box highlight the EmailAddress form element, and then in the Input/Text area be sure that the selection Required (Empty values not allowed) is checked and that the E-Mail Address radio button is selected. In the Error Message: field type in something similar to Please enter a valid email address!
5. In the Check Form dialog box, highlight the SelectList form element, and in the Menu area, select the Not The First radio button, and in the Error Message field type in something like Please select an item from the drop-down list!
7. Now you can check your HTML form in your favorite browser from Dreamweaver. Select File, and Preview in Browser (F12). Try submitting the form without entering a proper email address or not checking one of the radio buttons, not making a drop-down menu selection, or not selecting from the checkboxes. Several of the error messages may appear depending on what you select or omit in the form.