jQuery Form Manager

Overview

The W3C has been working toward providing a meaningful and functionally useful specification of form input control and validation for some time. As it stands, implementation varies from browser to browser, with some browsers providing no support at all. This collection of jQuery UI Widgets aims to provide a consistent, cross browser interface that can be extended to accomodate any user input construct.

Input

The base foundation in this collection of form related tools is the Input widget. The Input widget specifies the functions that users should make available when implementing an Input widget and also provides rudimentary functionality for users extending from the widget.

Core functions include:

input([value]): get or set the value of the input
name: name of the input either set as an option or element attribute
reset: reset the input to its initial value
validation: user defined validation function
invalidate: adds visuals to negative validation outcome
clear: removal of negative validation visuals
change: callback when the value is changed
validationState: the current validation state of the input

State functions include:

hasChanged: Has the input value changed since the value was last set
isValid: Is the input's value considered valid
isDisabled: Is the input disabled

The Input widget is noval in that it brings the concept of an interface to the jQuery UI framework; a key feature that has been lacking for some time. Any interactive element can become an Input widget by extending the base widget or by importing the base widget's methods (See Examples below).

Form

The Form widget provides a central access point for operations on Inputs in a group fashion. It serves as manager of any Input that is attached to an element that is a descendent of the Form's attached element.

The Form functionality mirrors that of the Input interface with the only difference being that functions are applied to all Inputs (or a subset of those Inputs via selector) that are considered a part of the Form. For example, users can query all the values of the Inputs or call any of the Input methods, such as clear, reset, validate, on all the Inputs at the Form level.

The jQuery UI Form manager also provides an extensive selector mechanism for filtering Inputs in all Form functions. Inputs can be filtered by properties (aka attributes) and dichotomies (aka booleans). In addition to these filters there are also various Set type operators available, including merge ('|'), intersect ('&'), exclude ('-'), and group ('('...')'). These operators allow aggregation of inputs that would normally only be accomplished through several intermediate calls to the inputs function.

An Input implementation for basic input form elements (text, password, textarea, select, checkbox, and radio) is provided to aid users in getting started quickly with the Form Manager.

Examples

Radio Button Group

<div id="season">
    <label for="season">Season</label>
    <input type="radio" name="season" checked="checked" value="winter">Winter</input>
    <input type="radio" name="season" value="spring">Spring</input>
    <input type="radio" name="season" value="summer">Summer</input>
    <input type="radio" name="season" value="autumn">Autumn</input>
</div>

with

var seasonInput = $('#season').inputBasic({initialValue: 'spring'}).inputBasic("instance");
console.log(seasonInput.value()); // Outputs 'spring'
seasonInput.value('summer');
console.log(seasonInput.value()); // Outputs 'summer'

UI Slider as an Input

var inputSlider = $.widget("ui.slider", 
    $.aw.experimental.implement(
        $.aw.experimental.acquireTraits(
            {
                _create: function() {
                    this._super();
                    this._defaultValue = this.value();
                },
                value: function(value) {
                    this._super(value);
                    this._defaultValue = value;
                },
                reset: function() {
                    this.value(this._defaultValue);
                },
                hasChanged: function() {
                    return this.value !== this._defaultValue;
                },
                _change: function(event) {
                    var uiHash = {
                        'element': this.element,
                        'currentValue': this.value(),
                        'value': this.value(),
                        'name': this.name,
                        'previousValue': this._lastChangedValue,
                        'source': (event != null ? this.element[0] : undefined)
                    };
                    this._lastChangedValue = uiHash.currentValue;
                    this._trigger( "change", event, uiHash );
                }
            },
            $.aw.input
        ),
        $.aw.input
    )
);

Form Input values for Ajax Post

$.post({
    my_url,
    $.param($('body').form('values'))
});

Limitations

There are no known limitations at this time.