How to Validate a Text Area With Dreamweaver Spry Form Widgets

Dreamweaver CS3 comes with some Spry validation widgets for forms. In this article you will learn how to validate a text area and customize Spry error messages.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Dreamweaver CS3 software

1. 
    
   Choose the text area button.

   If you already have a form text area field on your page, select it and then click the Spry button for text areas. If you don't yet have a text area, click the Spry button for text area and one will be inserted.

2. 
    
   The Accessibility Dialog

   The Accessibility dialog will open. Fill in the information here for the form element id and label. Click OK. If you haven't yet added a form element to your page, Dreamweaver offers to do that for you.

3. 
    
   Add the dependent files to your site.

   Dreamweaver notifies you of the dependent files you will have added to your site to make the Spry widget work. Click OK.

4. 
    
   Code and Design Views Combined

   You can rename the form widget using the Property inspector instead of the generic name like sprytextarea1. Dreamweaver adds the widget name with a span element wrapped around the form element. You should probably leave "spry" in the name if you decide to change it. This will help you keep from confusing it with the ID and Label information entered in the Accessibility dialog box. The example pictured is for a Comments text area, so I renamed the widget "spry_comment." Notice that the Required checkbox is automatically selected on the Property inspector. The graphic is a combined image showing what Dreamweaver has in Code View and Design View at this point. (Your Design View may be red.)

5. 
    
   Preview state Required shows the error message.

   When the checkbox making this a Required field is selected in the Property inspector and the Preview state is set to Required, the error message is shown in Design View. The user would not see this in the browser unless there was an error in validating the field. This can be customized by typing a new message in the document window. You should also check the Property inspector Preview state menu, because for some widgets (not this one) checking Preview state is a good habit to form since the error message may change depending on the circumstances. In this example, the error message is what you would see if the form were submitted with the Comments text area empty. If you don't want to see the error message in Design View, set the Preview state to Initial or Valid.

6. 
    
   Set properties with the Property inspector.

   Deciding when to validate is done using the Property inspector. For required text area asking for comments, the best choice is validation on Submit. Validating onBlur would pop up the error message as soon as the user moved to a new form field. This would be acceptable in some situations. Validating on change would be a bit irritating to users for a text area, since every keystroke is a change, so an error message would appear the moment someone started typing in the text box.

7. Look again at the image of the Property inspector in the previous step. You can set limits on the minimum (Min chars) and maximum (Max chars) number of characters allowed in the text area with the Property inspector. Selecting Block extra characters after you set a Max chars value means that any extra characters the user types will not show up. If you choose to limit characters, you can add a counter to let the user know either how many characters have been used or how many remain. You can also insert a "Hint" that will appear in the text area box before the person begins to type. In the comments text area example a hint like "Type your comment" could be used, however, with proper use of the label element that you set up in the Accessibility dialog at the very beginning, a hint would not be necessary.

8. 
    
   Customize the error message appearance.

   You can change the default styling of the error message to red with a red outline. See the next step for this process.

9. 
    
   Edit the CSS as desired.

   In the CSS Styles panel look for the style selector that begins .textareaRequiredState .textareaRequiredMsg and keeps on going with a comma separated list of selectors. You can edit this in the usual way in the Dreamweaver CSS Style editing dialog window.

Tips & Warnings

• The label will appear inline before the text box. You can change this with a line break immediately after the label so that it will appear above the text area.
• Since the error messages are inserted with a span tag, the error appears inline immediately after the form element when needed. If you want the error message on its own line you can change the span to a p or div–-just be sure to keep the class name intact that styles it.