Spry

Insert the Validation Select widget

  1. Locate the SpryValidationSelect.js file and add it to your web site. You can find the SpryValidationSelect.js file in the widgets/selectvalidation directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

    For example, create a folder called SpryAssets in the root folder of your web site, and upload the SpryValidationSelect.js file to it. The SpryValidationSelect.js file contains all of the information necessary for making the Select widget interactive.

  2. Locate the SpryValidationSelect.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.
  3. Open the web page to add the Select widget to and link the SpryValidationSelect.js file to the page by inserting the following script tag in the page’s head tag: 
    <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>

    Make sure that the file path to the SpryValidationSelect.js file is correct. This path varies depending on where you’ve placed the file in your web site.

  4. Link the SpryValidationSelect.css file to your web page by inserting the following link tag in the page’s head tag: 
    <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />

    Make sure that the file path to the SpryValidationSelect.css file is correct. This path varies depending on where you’ve placed the file in your web site.

  5. Add a select list to the page and give it a name and a unique ID: 
    <select name="myselect" id="myselect"></select>
  6. Add options to the select list, as follows: 
    <select name="myselect" id="myselect">
	<option>--Please select an item--</option>
	<option value="item1">Item 1</option>
	<option value="item2">Item 2</option>
	<option value="-1">Invalid Item</option>
	<option value="item3">Item 3</option>
	<option>Empty Item</option>
</select>
  7. To add a container around the select list, insert span tags around the select tags, and assign a unique ID to the widget, as follows: 
    <span id="spryselect1">
	<select name="myselect" id="myselect">
		<option>--Please select an item--</option>
		<option value="item1">Item 1</option>
		<option value="item2">Item 2</option>
		<option value="-1">Invalid Item</option>
		<option value="item3">Item 3</option>
		<option>Empty Item</option>
	</select>
</span>
  8. To initialize the Spry validation select object, insert the following script block after the HTML code for the widget: 
    <script type="text/javascript">
	var selectwidget1 = new Spry.Widget.ValidationSelect("spryselect1");
</script>

    The new JavaScript operator initializes the Select widget object, and transforms the span tag content with the ID of spryselect1 from static HTML code into an interactive select object. The Spry.Widget.ValidationSelect method is a constructor in the Spry framework that creates select objects. The information necessary to initialize the object is contained in the SpryValidationSelect.js JavaScript library that you linked to at the beginning of this procedure.

    Make sure that the ID of the select list’s container span tag matches the ID parameter you specified in the Spry.Widgets.ValidationSelect method. Make sure that the JavaScript call comes after the HTML code for the widget.

  9. Save the page.

    The complete code looks as follows:

    <head> 
... 
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
	<span id="spryselect1">
		<select name="myselect" id="myselect">
			<option>--Please select an item--</option>
			<option value="item1">Item 1</option>
			<option value="item2">Item 2</option>
			<option value="-1">Invalid Item</option>
			<option value="item3">Item 3</option>
			<option>Empty Item</option>
		</select>
	</span>
<script type="text/javascript">
	var selectwidget1 = new Spry.Widget.ValidationSelect("spryselect1");
</script>
</body>