Pin Me

Validate User Input with Spry Widgets

written by: cra8051•edited by: Michele McDonough•updated: 5/30/2010

Although most Web programming software includes a way to require that user input meet some pre-selected criteria such as email addresses or telephone numbers in the correct format, Dreamweaver CS3 includes a special set of tools called Spry Widgets, which offer some enhancements to this process.

  • slide 1 of 4

    Create the Validation Field

    To see how this works, create a new HTML form in Dreamweaver CS3. Click “Insert,” “Spry,” and then “Spry Validation Text Field.” If you have Dreamweaver set to give you accessibility prompts, there will be a window to supply attributes for the field. This can be filled in or simply ignored by clicking “OK” right away. Once this is done, there will be a Spry text field showing on the HTML page.

    The properties of the text field appear at the bottom of the page. In the Textfield box, supply a name for this field. The name must not contain spaces or special characters, only alphanumeric characters. Use something that describes the purpose of the field, such as “TelephoneNbr.” This name will not appear in a browser; it is there just to process the data. By default, the widget is set to require input as you see from this code behind the field:


    <form id="form1" name="form1" method="post" action="">

    <span id="sprytextfield1">


    <input type="text" name="TelephoneNbr" id="TelephoneNbr" />


    <span class="textfieldRequiredMsg">A value is required.</span></span>


    You can delete the required line if you want, but then what would be point of using a validation field?

  • slide 2 of 4

    Set Requirements for the Field

    To require the user to enter a telephone number in correct format (although there is no easy way to ensure it actually is a real telephone number), use the settings in the properties box for the widget itself by clicking on the name that appears above the text field. In this example the widget is described as “Spry TextFiled: sprytextfield1.” One option is the Type, where a drop-down list offers preset types such as email address, date, time, credit card, phone number, Social Security, currency, IP address and more. There is a custom option as well. In cases where formats might differ depending on the country, another field for format can set this. You can choose US-5, US-9, Canada or UK as presents, or create your own custom format. Additional options are in the properties settings including minimum and maximum characters and values.

    In the code, the telephone type setting looks like this:

    <script type=”text.javascript”>

    Var tfl=new Spry.Widget.ValidationTextField(“sprytextfield1”, “phone_number”)’


    Add a “Submit” button and edit the form action to meet whatever system your Web host uses for processing forms, upload this, and test. Alternatively, you can use the “Preview in Browser” option in Dreamweaver, although you may have to edit your security settings to allow access to the Preview option.

  • slide 3 of 4

    Other Validation Options

    Spry widgets include TextArea validation, particularly useful for setting a maximum on the amount of text or requiring at least some text; a TextBox widget to require at least one selection; and a Validation Select widget. The latter sets up a menu type list with pop up (drop down) values. They all function in a similar fashion.

  • slide 4 of 4


    In general, the code needed for a Spry Widgets for Text Field Validation will be less than using a more complex javascript to perform this action.

    Form validation will not verify that entered information is accurate by looking if up somewhere, but it will at least ensure the required data is present and in the correct form.

Using Spry Widgets in Dreamweaver CS3 to Add Verstility to Your Web Design

Spry widgets can enhance otherwise drab displays as well as offer options that would otherwise require convoluted codind or in some cases not even be possible without using additional programs. This series describes how to use some of these widgets.
  1. Expand the Functionality of Your Web Pages with Collapsible Panels
  2. Use the Spry Menu Bar Widget in Dreamweave to Improve Appearances
  3. Validate User Input with Spry Widgets
  4. Create Accordion Displays of Web Content Using the Spry Accordion Widget