Spry Checkbox Validation API

Checkbox Validation Widget

Description

The Spry Checkbox Validation Widget is used to validate a checkbox or series of checkboxes before submitting the form.

Required Files

SpryValidationCheckbox.js

SpryValidationCheckbox.css

Reference File

SpryValidationCheckbox.html

Sample Files

CheckboxValidationSample.html

Structure

The widget structure is as follows:

   <widget container>
      <input checkbox(es)>
      <message container>
   </widget container>

The Checkbox Validation Widget supports one or many checkboxes.

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="sprycheckbox1">
  <input type="checkbox" name="checkbox1" id="checkbox1" />
  <span class="checkboxRequiredMsg">Please make a selection.</span></span>

Constructor

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 sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1");
</script>

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.ValidationCheckbox("id of widget container");   
</script>

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.ValidationCheckbox("id of widget container",{option1:value, option2:value, option3:"value"});   
 </script>

Option	Values	Default	Description
isRequired	true or false	true	Determines whether any checkboxes need to be checked. Set to 'false' to bypass validation.
maxSelections	number	null	Determines the maximum number of checkboxes that can be checked within the checkbox group.
minSelections	number	null	Determines the minimum number of checkboxes that need to be checked before being valid.
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.ValidationCheckbox("myCollapsiblePanel",{isRequired:false, minSelections:2, maxSelections:5, validateOn:['blur','change']});   
 </script>

Recall that javascript is case sensitive.

Checkbox Validation Widget Methods

reset

Reset the widget to its original state.

Format

widgetName.reset();

Example

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

validate

Validates the current state of the widget.

Format

widgetName.validate();

Example

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