Customising Dreamweaver CS4’s Spry Validation Text Field

Adobe Dreamweaver, a key component of Adobe CS4, contains a number of components which use a combination of CSS and JavaScript to add useful interactive functionality to your web pages.

Adobe Dreamweaver, a key component of Adobe CS4, contains a number of components which use a combination of CSS and JavaScript to add useful interactive functionality to your web pages. These components include several 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 Dreamweaver CS4‘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.

Having inserted 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. [via MacreSource]

Share this article

We welcome comments that advance the story directly or with relevant tangential information. We try to block comments that use offensive language, all capital letters or appear to be spam, and we review comments frequently to ensure they meet our standards. If you see a comment that you believe is irrelevant or inappropriate, you can flag it to our editors by using the report abuse links. Views expressed in the comments do not represent those of Coinspeaker Ltd.