Spry User Guide - Support - Adobe
Spry User Guide - Support - Adobe
Spry User Guide - Support - Adobe
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Whenever a Validation Select widget enters one of the preceding states through user interaction, the <strong>Spry</strong> framework<br />
logic applies a specific CSS class to the HTML container for the widget at run time. For example, if a user tries to<br />
submitaform,butdidnotselectanitemfromthemenu,<strong>Spry</strong>appliesaclasstothewidgetsothatitdisplaystheerror<br />
message, “Please select an item.” The rules that control the style and display states of error messages reside in the<br />
<strong>Spry</strong>ValidationSelect.css file that accompanies the widget.<br />
The default HTML code for the Validation Select widget, usually inside of a form, is made up of a container span tag<br />
that surrounds the select tag of the text area. The HTML code for the Validation Select widget also includes script<br />
tags in the head of the document and after the widget’s HTML code.<br />
The HTML code for the Validation Select widget also includes script tags in the head of the document and after<br />
the widget’s HTML code. The script tag in the head of the document defines all of the JavaScript functions related<br />
to the Select widget. The script tag after the widget code creates a JavaScript object that makes the widget interactive.<br />
Following is the HTML code for a Validation Select widget:<br />
<br />
...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
--Please select an item--<br />
Item 1<br />
Item 2<br />
Invalid Item<br />
Item 3<br />
Empty Item<br />
<br />
<br />
Please select an item.<br />
<br />
<br />
<br />
<br />
var spryselect1 = new <strong>Spry</strong>.Widget.ValidationSelect("spryselect1");<br />
<br />
<br />
In the code, the new JavaScript operator initializes the Select widget object, and transforms the span content with<br />
the ID of spryselect1 from static HTML code into an interactive page element.<br />
The span tag for the error message in the widget has a CSS class applied to it. This class (which is set to<br />
display:none; by default), controls the style and visibility of the error message, and exists in the accompanying<br />
<strong>Spry</strong>ValidationSelect.css file. When the widget enters different states as a result of user interaction, <strong>Spry</strong> places<br />
different classes on the container for the widget, which in turn affects the error-message class.<br />
SPRY<br />
<strong>User</strong> <strong>Guide</strong><br />
76