Spry List/Menu Validation Samples

This page demonstrates the capabilities of the Spry List/Menu Validation Widget.

This is an example of a Spry List/Menu Validation widget.
There are three validation techniques: validation can occur as you go (Change), when the select input looses focus (Blur) or only when the form is submitted (Submit). The Submit validation always occurs, regardless of the other options chosen.

Change - Submit

Please select an item.
Blur - Submit

Please select an item.
Submit

Please select an item.

 

The Spry List/Menu Validation widget allows you to specify an invalid value, that will not be submitted if the user selects it. This is useful when you want to use visual separators between the options in the widget. The invalid value is specified in the constructor, in this case, it is "-".

Change - Submit

Please select an item. Please select a valid item.
Blur - Submit

Please select an item. Please select a valid item.
Submit

Please select an item. Please select a valid item.

 

The following example shows a customized version of the error messages. The error messages for each restriction are located in the page so you may easily change them to a fit your needs.

Choose your state:

Please select a valid state. Please select your state.

 

The following example shows how the error messages can be displayed in a different location than the select container.

Choose your state:

Please select a valid state. Please select your state.
Errors: Please select a valid state. Please select your state.

This is an example showing how to style the error messages, using a css class similar to the one from the SpryValidationSelect.css file.

Choose your state:

Please select a valid state. Please select your state.

 

You can change the widget container to use directly the list/menu label, and not use any error messages.