Configuring Adobe Dreamweaver CS4’s Spry Validation Text Field

July 26, 2009

By system

Adobe Dreamweaver, a key component of the Adobe Creative Suite, contains a number of components which use a combination of CSS and JavaScript to add useful interactive functionality to your web pages. Amongst these components are a number which allow you add sophisticated validation and checking to your web forms. The Spry validation text-field allows you to create a text input form field which will automatically be verified using the parameters that you specify.

You will probably find it useful to go into either code or split screen view when working with Adobe Dreamweaver’s validation gizmos, since editing them in Design view may occasionally produce strange results. (By the way, when working in split screen mode, be sure to try the Split Vertically option under the View menu; it’s much better than the horizontal split.) These problems are mainly to do with accidentally messing up the span tags which Dreamweaver uses to demarcate the various parts of the validation controls; so, keeping on eye on the code will help to prevent any accidents.

Once you have added a Spry validation text field, you can use the options in the Properties panel to customise its behaviour. Firstly, there is the Type drop-down menu. This contains options that allow you to specify the type of data which the field is meant to contain. The available types are integer, email address, date, time, credit card, zip code, phone number, social security number, currency, real numbers, IP address and custom. When you choose some of these options, the Format drop-down menu allows you to further fine tune, the nature of the permissible values. For example, when you choose currency, the Format drop-down is activated and allows you to choose between the Anglo-Saxon “1,000,000.000″ and the European “1.000.000,00″ notations.

If you choose the custom option, the Pattern Field of the Properties panel becomes active, allowing you to use special values to indicate which characters are permitted in various positions within the data entered into the field. Custom patterns will be the subject of a future article, so we won’t say any more about them here.

Any value entered in the Hint field will appear in the field when the page first loads and can act as a prompt or “idiot’s guide” to what may be entered in the field. When the user tabs or clicks to enter the field, the prompt will simply disappear.

The other important aspect of customisation is to tailor Dreamweaver’s default error messages to suit your own purposes. This is done with the aid of the four options in the Preview States drop-down menu: Initial, Required, Invalid Format and Valid. To specify the error message which will be displayed when a required field Is left blank, choose the Required option then modify the default message which Dreamweaver displays next to the text field. To set the error to be displayed when inappropriate data is entered into the field, choose Invalid Format.

You can learn everything you need to know about Dreamweaver CS4 and Spry on this Intermediate Dreamweaver training course.

Popularity: 1%

Bookmark Now