Note:

Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

About the Validation Text Field widget

A Spry Validation Text Field widget is a text field that displays valid or invalid states when the site visitor enters text. For example, you can add a Validation Text Field widget to a form in which visitors type their e-mail addresses. If they fail to type the “@” symbol and a period in the e-mail address, the widget returns a message stating that the information the user entered is invalid.

The following example shows a Validation Text Field widget in various states:

Validation Text Field widget
Validation Text Field widget

A. Textfield widget, hint activated B. Textfield widget, valid state C. Textfield widget, invalid state D. Textfield widget, required state 

The Validation Text Field widget includes a number of states (for example, valid, invalid, required value, and so on). You can alter the properties of these states using the Property Inspector, depending on the desired validation results. A Validation Text Field widget can validate at various points—for example, when the visitor clicks outside the widget, when they type, or when they try to submit the form.

Initial state

The widget state when the page loads in the browser, or when the user resets the form.

Focus state

The widget state when the user places the insertion point in the widget.

Valid state

The widget state when the user has entered information correctly, and the form can be submitted.

Invalid state

The widget state when the user has entered text in an invalid format. (For example, 06 for a year instead of 2006).

Required state

The widget state when the user has failed to enter required text in the text field.

Minimum Number Of Characters state

The widget state when the user has entered fewer than the minimum number of characters required in the text field.

Maximum Number Of Characters state

The widget state when the user has entered greater than the maximum number of characters allowed in the text field.

Minimum Value state

The widget state when the user has entered a value that is less than the value required by the text field. (Applies to integer, real, and data type validations.)

Maximum Value state

The widget state when the user has entered a value that is greater than the maximum value allowed by the text field. (Applies to integer, real, and data type validations.)

Whenever a Validation Text Field widget enters one of these states through user interaction, the Spry framework logic applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to submit a form, but has entered no text in a required text field, Spry applies a class to the widget that causes it to display the error message, “A value is required”. The rules that control the style and display states of error messages exist in the CSS file that accompanies the widget, SpryValidationTextField.css.

The default HTML for the Validation Text Field widget, usually inside of a form, comprises a container <span> tag that surrounds the <input> tag of the text field. The HTML for the Validation Text Field widget also includes script tags in the head of the document and after the widget’s HTML markup.

For a more comprehensive explanation of how the Validation Text Field widget works, including a full anatomy of the Validation Text Field widget’s code, see www.adobe.com/go/learn_dw_sprytextfield.

Insert and edit the Validation Text Field widget

Insert the Validation Text Field widget

  1. Select Insert > Spry > Spry Validation Text Field.
  2. Complete the Input Tag Accessibility Attributes dialog box and click OK.

Note:

You can also insert a Validation Text Field widget by using the Spry category in the Insert panel.

Specify a validation type and format

You can specify different validation types for the Validation Text Field widget. For example, you can specify a credit card validation type if the text field will receive credit card numbers.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), select a validation type from the Type menu.
  3. If applicable, select a format from the Format pop-up menu.

Most validation types cause the text field to expect a standard format. For example, if you apply the integer validation type to a text field, the widget won’t validate unless the user has entered numbers in the text field. Some validation types, however, let you choose the kind of format your text field will accept. The following table lists validation types and formats that are available through the Property inspector:

Validation type

Format

None

No particular format required.

Integer

Text field accepts numbers only.

Email Address

Text field accepts e-mail addresses that contain @ and a period (.) that is both preceded and followed by at least one letter.

Date

Formats vary. Make your selection from the Format pop-up menu of the Property inspector.

Time

Formats vary. Make your selection from the Format pop-up menu of the Property inspector. (“tt” stands for am/pm format; “t” stands for a/p format.)

Credit Card

Formats vary. Make your selection from the Format pop-up menu of the Property inspector. You can choose to accept all credit cards, or specify a particular kind of credit card (MasterCard, Visa, etc.). The text field does not accept spaces in credit card numbers, i.e. 4321 3456 4567 4567.

Zip Code

Formats vary. Make your selection from the Format pop-up menu of the Property inspector.

Phone Number

Text field accepts phone numbers formatted for U.S. and Canada (000) 000-0000 or custom formats. If you select custom format as an option, enter the format, for example, 000.00(00), in the Pattern text box.

Social Security Number

Text field accepts social security numbers formatted as 000-00-0000. If you want to use a different format, select Custom as your validation type and specify a pattern. The pattern validation mechanism accepts only ASCII characters.

Currency

Text field accepts currency formatted as 1,000,000.00 or 1.000.000,00.

Real Number/Scientific Notation

Validates various kinds of numbers: integers (for example, 1); float values (for example, 12.123); and float values in scientific notation (for example, 1.212e+12, 1.221e-12 where e is used as a power of 10).

IP Address

Formats vary. Make your selection from the Format pop-up menu of the Property inspector.

URL

Text field accepts URLs formatted as http://xxx.xxx.xxx or ftp://xxx.xxx.xxx.

Custom

Lets you specify a custom validation type and format. Enter the format pattern (and hint if desired) in the Property inspector. The pattern validation mechanism accepts only ASCII characters.

Specify when validation occurs

You can set the point at which validation occurs—when the site visitor clicks outside the widget, as the visitor types, or when the visitor tries to submit the form.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties) select the option that indicates when you want validation to occur. You can select all of the options or Submit only.

    Blur

    Validates whenever the user clicks outside the text field.

    Change

    Validates as the user changes text inside the text field.

    Submit

    Validates when the user tries to submit the form. The submit option is selected by default, and cannot be deselected.

Specify a minimum and maximum number characters

This option is only available for None, Integer, E-mail Address, and URL validation types.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), enter a number in the Min Chars or Max Chars box. For example, if you enter 3 in the Min Chars box, the widget only validates if the user enters three or more characters.

Specify minimum and maximum values

This option is only available for Integer, Time, Currency, and Real Number/Scientific Notation validation types.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), enter a number in the Min Value or Max Value box. For example, if you enter 3 in the Min Value box, the widget only validates if the user enters the number 3 or a value greater (4, 5, 6, and so on) in the text field.

Display widget states in Design view

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), select the state you want to see from the Preview States pop-up menu. For example, if you want to see the widget in its valid state, select Valid.

Change required status of a text field

By default, all Validation Text Field widgets that you insert with Dreamweaver require user input when published on a web page. You can, however, make the completion of text fields optional for the user.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), select or deselect the Required option, depending on your preference.

Create a hint for a text field

Because there are so many different kinds of formats for text fields, it is helpful to give your users a hint as to what format they need to enter. For example, a text field set with the Phone Number validation type will only accept phone numbers in the form (000) 000-0000. You can enter these sample numbers as a hint so that the text field displays the correct format when the user loads the page in a browser.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), enter a hint in the Hint text box.

Block invalid characters

You can prevent your users from entering invalid characters in a Validation Text Field widget. For example, if you select this option for a widget set with the Integer validation type, nothing appears in the text field if the user tries to type a letter.

  1. Select a Validation Text Field widget in the Document window.
  2. In the Property inspector (Window > Properties), select the Enforce Pattern option.

Customize the Validation Text Field widget

Although the Property inspector enables you to make simple edits to a Validation Text Field widget, it does not support customized styling tasks. You can alter the CSS for the Validation Text Field widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytextfield_custom.

All CSS rules in the topics below refer to the default rules located in the SpryValidationTextField.css file. Dreamweaver saves the SpryValidationTextField.css file in the SpryAssets folder of your site whenever you create a Spry Validation Text Field widget. Consulting this file is helpful because it contains commented information about various styles that apply to the widget.

Note:

Although you can easily edit rules for the Validation Text Field widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Style Validation Text Field widget error message text

By default, error messages for the Validation Text Field widget appear in red with a 1-pixel border surrounding the text.

  • To change the text styling of Validation Text Field widget error messages, use the following table to locate the appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values:

    Text to change

    Relevant CSS rule

    Relevant properties to change

    Error message text

    .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

Change Validation Text Field widget background colors

  • To change the background colors of the Validation Text Field widget in various states, use the following table to locate the appropriate CSS rule, and then change the default background color values:

    Color to change

    Relevant CSS rule

    Relevant property to change

    Background color of widget in valid state

    .textfieldValidState input, input.textfieldValidState

    background-color: #B8F5B1;

    Background color of widget in invalid state

    input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input

    background-color: #FF9F9F;

    Background color widget in focus

    .textfieldFocusState input, input.textfieldFocusState

    background-color: #FFFFCC;

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy