formConditons - jQuery UI widget that makes building dynamic forms easier

Creating dynamic forms can be time consuming. Hiding one field based on another field value is pretty easy. But when you have to set up a form with many inputs showing and hiding based on may different input values your code can get ugly really fast. formCondtions plugin attempts to make your life easier by providing a standard api to get your form code under control.

The markup

The plugin assumes that your form markup is very simular to this

<form>
	<fieldset>
            <legend>Contact Info</legend>
            <div>
                <label>first name</label><input type="text" name="firstname">
            </div>
            <div>
                <label>last name</label><input type="text" name="lastname">
            </div>
            <div>
                <label>email</label><input type="text" name="email">
            </div>
        </fieldset>
</form>

Each input and label must be wrapped in another element such as a <div> <span> <li> , etc. This lets the pugin easly show / hide that element. Note: you don't have to have a fieldset.

Set up your conditions

$('form').formConditons({
    conditions: [
        {
            name: 'lastname',
            rules: [
                {
                    selector: 'input[name=email]',
                    operator: 'contains',
                    value: '@'
                }
            ],
            tru: [
                {
                    selector: 'input[name=lastname]',
                    action: 'show'
                }
            ],
            fal: [
                {
                    selector: 'input[name=lastname]',
                    action: 'hide'
                }
            ]
        }
       
})

On this form I'm saying if the email contains @ show the lastname field else hide it.

Options

Currently there is only one option for this plugin, conditions, It's a array. Here is the break down of a condtion

parameter description default
name The name of the condition. This isn't required but if you want to remove the condition from the form you will need to supply one  
rules

array comprised of objects with the following properties

  • selector - this is a jquery selector of the input you are targeting
  • operator - string, possible values are, equal, not-equal, checked, contains, doesn't-contain
  • value - like # used in conjunction with operator
[]
tru

array, these outcomes are run if all of the rules are true. an outcome is an object with the following properties

  • action - show, hide or function
  • selector: jquery selector only used for outcomeActions
[]
fal see tru, the only difference is that these outcomes are run if the rules are false, Say you have 3 rules on defined and only 2 of them are true then this set of outcomes would run []

 Methods

name description Arguments
addCondition Add a condtion to the stack conditon object
removeCondition remove a condtion name of the condtion

 As a side note you can add your outcome actions by extending the widget protoype like this

$.extend($.jb.formConditons.prototype.outcomeActions,{
      'youractionname': function(){}
})

Please feel free to leave your ideas and or comments below.