Radio Validation Widget


The Spry Radio Validation Widget is used to validate a radio button or group of radio buttons before submitting the form.

Required Files



Reference File


Sample Files




The widget structure is as follows:

   <widget container>
      <input radio button(s)>
<message container>
</widget container>

The Radio Validation Widget supports one or many radio buttons.

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

 <span id="ValidRadio1">
<input type="radio" name="radio1" id="radio1" value="1"/>
<span class="radioRequiredMsg">Please make a selection.</span>


Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

<script type="text/javascript">
var ValidRadio1 = new Spry.Widget.ValidationRadio("ValidRadio1");

Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.ValidationRadio("id of widget container");   

Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.ValidationRadio("id of widget container",{option1:value, option2:value, option3:"value"});   
Option Values Default Description
isRequired true or false true Determines whether any radio buttons need to be checked. Set to 'false' to bypass validation.
defaultValue a value of a radio button null Determines the default value of the radio group. Used to set it to 'None'.
invalidValue a value of a radio button null Determines a value that will not pass validation.
validateOn "blur", "change" submit The widget always validates onSubmit. onBlur and onChange can be added with this option. Both can be applied with an array ['blur', 'change']
 <script type="text/javascript"> 
   var ac1 = new Spry.Widget.ValidationRadio("myRadioButton",{isRequired:false, minSelections:2, maxSelections:5, validateOn:['blur','change']});   

Recall that javascript is case sensitive.

Radio Validation Widget Methods


Reset the widget to its original state.




 <a href="#" onclick="radio1.reset(); return false;">Reset Radio</a> 


Validates the current state of the widget.




<a href="#" onclick="radio1.validate(); return false;">Validate Radio</a>

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.