How to Validate a Text Field 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 field and customize Spry error messages.

Difficulty: Moderate

Instructions

Things You'll Need:

• Dreamweaver CS3 (or above) software

1. 
   The Spry Form Validation Buttons

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

2. 
   Insert an ID and label for the text field.

   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. 
   The JavaScript and CSS Files Needed

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

4. 
   The Default Information

   You can rename the form "widget" using the Property inspector instead of using the generic name like sprytextfield1. 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. That way it won't conflict with the ID and label you've chosen. The example pictured is for a first name text field, so I renamed the widget to spry_fname. 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.

5. 
   The Required Preview state

   When Preview state "Required" is selected in the Property inspector, 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 the pictured example the error message is what you would see if the form were submitted with the first name field empty. If you don't want to see the error message in Design View, then select the Preview state "Initial."

6. 
   The Types of Text Fields Available in Dreamweaver

   Deciding when to validate is done using the Property inspector. For a required text field asking for a name, the best choice is validation on Submit. However, there are a number of options in the Type menu on the Property inspector. If you selected Email Address from the Type menu, you might prefer to have it validate onBlur. If the text field did not contain an email address an error message like "Please enter a valid email address" would pop up the minute the user moved to the next form field. Validating on change would be a bit irritating to users for a text field, since every keystroke is a change, so an error message would appear the moment someone started typing in the text field.

7. You can set limits on the number of characters allowed in the text field with the Property inspector. You can also insert a "Hint" that will appear in the text field before the person begins to type. In the first name field example a hint like "Type your first name" 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 is not necessary.

8. 
   CSS is used on the error messages.

   Use the Property inspector to decide on the Type of validation. For the example here, asking for first name, making the field required and setting the Type to None would be adequate. However, there are 14 types of validations possible with text fields. None is the default. Integer checks for a whole number. Email looks for a properly formatted email address such as [e-mail]. Date can be formatted in different ways, as can Time. Use the Property inspector Format menu to set the format for Date or Time. Credit Card looks for a type of card and a format for entering the date (set this with the Format options). Zip Code can be set to look for either 5 or 9 digits. Phone number can only validate U.S. or Canadian numbers. Social Security Number looks for three numbers, a hyphen, two numbers, a hyphen and three numbers. Currency can validate for American or European formatting. Real number allows decimal numbers. IP address looks for a number formatted like an IP number. URI can be set to include the protocol such as http://. Finally, you can customize a validation test in various ways to look for patterns or various combinations of numbers or upper and lower case letters.

9. 
   CSS is used on the error messages.

   The default styling of the error message is red with a red outline. You can change that. In the CSS Styles panel look for the style selector that begins .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState 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

• 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.