Home

JFS Documentation

Reference Quick Links: Init Settings | Modifiers | Field Types

Detections | Detection Boolean Operators

Actions | Global Functions | Key List

QUICK START

Step 1: Add libraries and a container to your page

<head>
    <script type="text/javascript" src="/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/jfs.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/jfs.css" />
</head>
<body>
    <div id="form-container"></div>
</body>

Step 2: Define your form in XML or JSON

(Note: <mods> are modifiers.)

XML JSON

<?xml version="1.0" encoding="UTF-8"?>
<jfs>
    <field_sets>

        <i>
            <key>set</key>
            <fields>
                <i>
                    <key>text1</key>
                    <type>text</type>
                    <label>Fill Me</label>
                </i>

                <i>
                    <key>btn1</key>
                    <type>button</type>
                    <mods>
                        <i><key>btn_text</key><param>Then Click Me</param></i>
                        <i><key>btn_function</key><param>Submit</param></i>
                    </mods>
                </i>
            </fields>
        </i>

    </field_sets>

</jfs>

{

    jfs: {

        sets: [

            k: "set",

            fs: [

                { k: "text1", t: "text", l: "Fill Me" },

                {

                    k: "btn1",

                    t: "button",

                    m: [

                        { k: "btn_text", prm: "Then Click Me" },

                        { k: "btn_function", prm: "Submit" }

                    ]

                }

            ]

        ]

    }

}

Step 3: Initialize your form

var settings = {
    ContainerId: "form-container",
    Functions: {
        Submit: function(values, unfilled, pack, btnFunctionParamString) {
            alert("You Typed: " + values.vs.set.text1);
        }
    }
}

jQuery(document).ready(function(){
        jQuery.ajax({
            url: 'form.xml', dataType: "text",
            success: function(xml) {
                var formObj = JFS.ParseFormXml(xml);
                JFS.Init(formObj, {}, settings);
             }
        });
});

 

 

 

------------------------ REFERENCE ------------------------

Init Settings

SETTING TYPE DEFAULT EXAMPLE/OPTIONS
ContainerId string *NONE - REQUIRED SETTING*  "my_form"
CustomFields object {}

{

    readonlyfield: function(field, classList, modsDict, pack) {

        var fieldVal = ("fv" in field ? field.fv : "");
        var fieldContClassList = [];
        if ("addclass" in modsDict) { try { fieldContClassList.push(modsDict.addclass.prm); } catch(e){}; }
        return {
            FieldCont: 'field',
            FieldContClassList: fieldContClassList,
            LabelContClassList: [],
            PairContClassList: [],
            Html: "<p>" + fieldVal + "</p>"
        }

    }

}
CustomContainers object {}

{

    mycont: function(classList, html, pack) {

        classList.push("my_container");
        html = "<div class=\"" + classList.join(' ') + "\">" + html + "</div>";
        return html;

    }

}
CustomInputOptions object {}

{

    myoptions: function() {

        return [
            { l: "\Select...", v: "" },
            {
                k: "My OptGroup",
                os: [
                    { l: "Option 1", v: "val1" },
                    { l: "Option 2", v: "val2" }
                ]
            }
        ]

    }

}
ExcludeFormTags boolean *NOT IMPLEMENTED YET*  
FieldButtonPosition string "right" "left", "right
Functions object {}

{

    setfieldvalue: function(values, unfilled, pack) {

            var actions = [{

                tgt: "form/field_to_update,

                act: "setfieldvalueto",

                prm: "NEW VALUE"

            }];
            JFS.PerformFormActions(actions, pack);

    }

}
IconLabelPosition string "right" "left", "right"
IncludeAutoCompleteTrigger boolean false Set to "true" and use JFS.TriggerAutoCompleteSubmit(ContainerId]) to trick the browser into thinking you submitted and saving autocomplete info.
InlineOptions boolean true  
InfoBubbleIcon string "" "/images/icon_info.png"
Interface string "standard" "standard", "touch"
LabelPosition string "above" "above", "below", "left", "right"
LabelSuffix string ":"  
LabelRequiredString string "<span class='jfs_required_label'>*</span>"  
LabelRequiredPrepend boolean false  
NoValidate boolean false  
OptionLabelPosition string "right" "left", "right"
ResetPageTabIndexes boolean true  
UseHtml5Required boolean false  

Modifiers

KEY XML JSON
addclass <key>addclass</key><param>myclass</param> { k: "addclass", prm: "myclass" }
allowchars <key>allowchars</key><param>abcdef</param> { k: "allowchars", prm: "abcdef" }
augmentbuttons

<key>augmentbuttons</key>
<field_btns>
    <i>
        <params>
            <i><key>btn_position</key><param>left</param></i>
            <i><key>btn_icon</key><param>/icons/browse.png</param></i>
            <i><key>btn_title</key><param>Browse</param></i>
            <i><key>btn_function</key><param>AssetBrowser</param></i>

            <i><key>btn_function_param</key><param>mystring</param></i>
        </params>
    </i>
</field_btns>

{
    k: "augmentbuttons",
    fbts: [
        {
            prms: [
                { k: "btn_position", prm: "left" },
                { k: "btn_icon", prm: "/icons/browse.png" },
                { k: "btn_title", prm: "Browse" },
                { k: "btn_function", prm: "AssetBrowser" },

                { k: "btn_function_param", prm: "mystring" }
            ]
        }
    ]
}
augmenthtml

<key>augmenthtml</key>
<params>
    <i><key>html_above</key><param><![CDATA[<p>Info</p>]]></param></i>
    <i><key>html_below</key><param><![CDATA[<p>Info</p>]]></param></i>

    <i><key>html_label_above</key><param><![CDATA[<p>Info</p>]]></param></i>

    <i><key>html_label_below</key><param><![CDATA[<p>Info</p>]]></param></i>

    <i><key>html_field_above</key><param><![CDATA[<p>Info</p>]]></param></i>

    <i><key>html_field_below</key><param><![CDATA[<p>Info</p>]]></param></i>
</params>

{
    k: "augmenthtml",
    prms: [

        { k: "html_above", prm: "<p>Info</p>" },

        { k: "html_below", prm: "<p>Info</p>" },

        { k: "html_label_above", prm: "<p>Info</p>" },

        { k: "html_label_below", prm: "<p>Info</p>" },

        { k: "html_field_above", prm: "<p>Info</p>" },

        { k: "html_field_below", prm: "<p>Info</p>" }

    ]
}
btn_text <i><key>btn_text</key><param><![CDATA[Submit]]></param></i> { k: "btn_text", prm: "Submit" }
btn_title <i><key>btn_title</key><param><![CDATA[Click to Submit]]></param></i> { k: "btn_title", prm: "Click to Submit" }
btn_position <i><key>btn_position</key><param>right</param></i> { k: "btn_position", prm: "right" }
btn_icon <i><key>btn_icon</key><param>/images/btn.png</param></i> { k: "btn_icon", prm: "/images/btn.png" }
btn_icon_label_position <i><key>btn_icon_label_position</key><param>left</param></i> { k: "btn_icon_label_position", prm: "left" }
btn_function <i><key>btn_function</key><param>SubmitButtonClicked</param></i> { k: "btn_function", prm: "SubmitButtonClicked" }
btn_function_param <i><key>btn_function_param</key><param><![CDATA[more,data]]></param></i> { k: "btn_function_param", prm: "more,data" }
charcounter <key>charcounter</key> { k: "charcounter" }

count

Note: For Repeatable Groups

<key>count</key>

<params>

    <i><key>min</key><param>2</param></i>

    <i><key>max</key><param>5</param></i>

</params>

{
    k: "count",
    prms: [

        { k: "min", prm: "2" },

        { k: "max", prm: "5" },

    ]
}
infobubble <key>infobubble</key>
<params>
    <i><key>icon</key><param>/icons/info.png</param></i>
    <i><key>html</key><param><![CDATA[<p>Field Instructions...</p>]]></param></i>
</params>

{
    k: "infobubble",
    prms: [

        { k: "icon", prm: "/icons/info.png" },

        { k: "html", prm: "<p>Field Instructions...</p>" },

    ]
}
labelsuffix <key>labelsuffix</key><param>-</param> { k: "labelsuffix", prm: "-" }
length

<key>length</key>
<params>
    <i><key>min</key><param>5</param></i>
    <i><key>max</key><param>50</param></i>

    <i><key>status</key><param><![CDATA[80%]]></param></i>
</params>

{
    k: "length",
    prms: [

        { k: "min", prm: "5" },

        { k: "max", prm: "50" },

        { k: "status", prm: "80%" }

    ]
}
max

<key>max</key><param>50</param>

{ k: "max", prm: "50" }
min

<key>min</key><param>5</param>

{ k: "min", prm: "5" }
preventchars <key>preventchars</key><param>0123456789</param> { k: "preventchars", prm: "0123456789" }
required

<key>required</key><param>The link field is unfilled.</param>

 { k: "required", prm: "The link field is unfilled." }
requiredcustom *NOT IMPLEMENTED YET*  
requiredprepend <key>requiredprepend</key><param>true</param> { k: "requiredprepend", prm: "true" }
status <key>status</key><param>80%</param> { k: "status", prm: "80%" }
widthfillwrap <key>widthfillwrap</key> { k: "widthfillwrap" }
wordcounter <key>wordcounter</key> { k: "wordcounter" }

Field Types

TYPE XML JSON SUPPORTED MODIFIERS
button

<key>button1</key>
<type>button</type>
<mods>
    <i><key>btn_text</key><param>Submit</param></i>
    <i><key>btn_function</key><param>Submit</param></i>

    <i><key>btn_function_param</key><param>mystring</param></i>
</mods>

{

    k: "button1",

    t: "button",

    m: [

        { k: "btn_text", prm: "Submit" },

        { k: "btn_function", prm: "Submit" },

        { k: "btn_function_param", prm: "mystring" }

    ]

}

addclass, widthfillwrap

checkbox

Note: Supports Custom Options

 <key>checkbox1</key>
<type>checkbox</type>
<label>Checkbox Field 1</label>
<options>
    <i><label>Box 1</label><value>val1</value></i>
    <i><label>Box 2</label><value>val2</value></i>
</options>

{

    k: "checkbox1",

    t: "checkbox",

    l: "Checkbox Field 1",

    os: [

        { l: "Box 1", v: "val1" },

        { l: "Box 2", v: "val2" }

    ]

}

addclass, widthfillwrap
date <key>date1</key>
<type>date</type>
<label>Date Field 1</label>
<mods>
    ...jQuery UI Datepicker Settings...
</mods>

{

    k: "date1",

    t: "date",

    l: "Date Field 1",

    m: [

        ...jQuery UI Datepicker Settings...

    ]

}

addclass, widthfillwrap
datetime <key>datetime1</key>
<type>datetime</type>
<label>DateTime Field 1</label>
<mods>
    ...jQuery UI Datepicker w/Timepicker Addon Settings...
</mods>

{

    k: "datetime1",

    t: "datetime",

    l: "DateTime Field 1",

    m: [

        ...jQuery UI Datepicker w/Timepicker Addon Settings...

    ]

}

addclass, widthfillwrap
datetime-local <key>datetimelocal1</key>
<type>datetime-local</type>
<label>DateTime-Local Field 1</label>
<mods>
    ...jQuery UI Datepicker w/Timepicker Addon Settings...
</mods>

{

    k: "datetimelocal1",

    t: "datetime-local",

    l: "DateTime-Local Field 1",

    m: [

        ...jQuery UI Datepicker w/Timepicker Addon Settings...

    ]

}

addclass, widthfillwrap
hidden <key>hidden1</key>
<type>hidden</type>
<field_value>val</field_value>

{ k: "hidden1", t: "hidden", fv: "val" }

addclass
html <key>html1</key>
<type>html</type>
<field_value><![CDATA[<p>Html Content</p>]]></field_value>

{ k: "html1", t: "html", fv: "<p>Html Content</p>" }

addclass
number

<key>number1</key>
<type>number</type>
<label>Number Field 1</label>

<mods>
    <i>
        <key>length</key>
        <params>
            <i><key>min</key><param>5</param></i>

            <i><key>max</key><param>50</param></i>
        </params>
    </i>
</mods>

{

    k: "number1",

    t: "number",

    l: "Number Field 1",

    m: [

        {

            k: "length",

            prms: [

                { k: "min", prm: "5" },

                { k: "max", prm: "50" }

            ]

        }

    ]

}

addclass, widthfillwrap, min, max
password <key>password1</key>
<type>password</type>
<label>Password Field 1</label>		 { k: "password1", t: "password", l: "Password Field 1" } addclass, widthfillwrap, length, allowchars, preventchars

radio

Note: Supports Custom Options

 <key>radio1</key>
<type>radio</type>
<label>Radio Field 1</label>
<options>
    <i><label>Radio 1</label><value>val1</value></i>
    <i><label>Radio 2</label><value>val2</value></i>
</options>

{

    k: "radio1",

    t: "radio",

    l: "Radio Field 1",

    os: [

        { l: "Radio 1", v: "val1" },

        { l: "Radio 2", v: "val2" }

    ]

}

addclass, widthfillwrap
range <key>range1</key>
<type>range</type>
<label>Range Field 1</label>
<mods>
    <i><key>min</key><param>5</param></i>
    <i><key>max</key><param>10</param></i>
</mods>

{

    k: "range1",

    t: "range",

    m: [

        { k: "min", prm: "5" },

        { k: "max", prm: "10" }

    ]

}

addclass, widthfillwrap, min, max
repeatablegroup <key>repgroup1</key>
<type>repeatablegroup</type>
<label>Repeatable Group 1</label>
<control_btns>
    <i><key>add</key></i>
    <i><key>up</key></i>
    <i><key>down</key></i>
    <i><key>remove</key></i>
</control_btns>
<field_sets>
    <i>
        <legend>Group Legend</legend>
        <fields>
            <i>
                <key>inner1</key>
                <type>text</type>
                <label>Inner Text Field</label>
            </i>
        </fields>
    </i>
</field_sets>

{

    k: "repgroup1",

    t: "repeatablegroup",

    l: "Repeatable Group 1",

    cbts: [ { k: "add" }, { k: "up" }, { k: "down" }, { k: "remove" } ],

    sets: [

        lg: "Group Legend",

        fs: [

            { k: "inner1", t: "text", l: "Inner Text Field" }

        ]

    ]

}

addclass

select

Note: Supports Custom Options

 <key>select1</key>
<type>select</type>
<label>Select Field 1</label>
<options>
    <i><label>Option 1</label><value>val1</value></i>
    <i><label>Option 2</label><value>val2</value></i>
</options>

{

    k: "select1",

    t: "select",

    l: "Select Field 1",

    os: [

        { l: "Option 1", v: "val1" },

        { l: "Option 2", v: "val2" }

    ]

}

addclass, widthfillwrap

tel

 <key>tel1</key>
<type>tel</type>
<label>Tel Field 1</label>

{ k: "tel1", t: "tel", l: "Tel Field 1" }

addclass, widthfillwrap
text <key>text1</key>
<type>text</type>
<label>Text Field 1</label>		 { k: "text1", t: "text", l: "Text Field 1" } addclass, widthfillwrap, length, allowchars, preventchars, charcounter, wordcounter
textarea <key>textarea1</key>
<type>textarea</type>
<label>Text Area Field 1</label>		 { k: "textarea1", t: "textarea", l: "Text Area Field 1" } addclass, widthfillwrap, length, allowchars, preventchars, charcounter, wordcounter
url <key>url1</key>
<type>url</type>
<label>Url Field 1</label>		 { k: "url1", t: "url", l: "Url Field 1" } addclass, widthfillwrap

Detections

DETECTION XML JSON
checkboxvaluecontains

<target>set/group</target>

<detect>checkboxvaluecontains</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "checkboxvaluecontains"

    prm: "5"

}
checkboxvaluedoesnotcontain

<target>set/group</target>

<detect>checkboxvaluedoesnotcontain</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "checkboxvaluedoesnotcontain"

    prm: "5"

}
checkboxvaluesumgreaterthan

<target>set/group</target>

<detect>checkboxvaluesumgreaterthan</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "checkboxvaluesumgreaterthan"

    prm: "5"

}
checkboxvaluesumis
(Values must be integers.)

<target>set/group</target>

<detect>checkboxvaluesumis</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "checkboxvaluesumis"

    prm: "5"

}
checkboxvaluesumlessthan
(Values must be integers.)

<target>set/group</target>

<detect>checkboxvaluesumlessthan</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "checkboxvaluesumlessthan"

    prm: "5"

}
groupitemcountgreaterthan

<target>set/group</target>

<detect>groupitemcountgreaterthan</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "groupitemcountgreaterthan"

    prm: "5"

}
groupitemcountis

<target>set/group</target>

<detect>groupitemcountis</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "groupitemcountis"

    prm: "5"

}
groupitemcountlessthan

<target>set/group</target>

<detect>groupitemcountlessthan</detect>

<param>5</param>

{

    tgt: "set/group",

    det: "groupitemcountlessthan"

    prm: "5"

}
hasvalue <target>set/field</target><detect>hasvalue</detect> { tgt: "set/field", det: "ishidden" }
hasvaluenotempty <target>set/field</target><detect>hasvaluenotempty</detect> { tgt: "set/field", det: "hasvaluenotempty" }
hasnovalue <target>set/field</target><detect>hasnovalue</detect> { tgt: "set/field", det: "hasnovalue" }
hasnovalueorempty

<target>set/field</target><detect>hasnovalueorempty</detect>

{ tgt: "set/field", det: "hasnovalueorempty" }
ishidden

<target>set/field</target><detect>ishidden</detect>

{ tgt: "set/field", det: "ishidden" }
isshown

<target>set/field</target><detect>isshown</detect>

{ tgt: "set/field", det: "isshown" }
onblur <target>set/field</target><detect>onblur</detect> { tgt: "set/field", det: "onblur" }
onchange <target>set/field</target><detect>onchange</detect> { tgt: "set/field", det: "onchange" }
onchangenotempty <target>set/field</target><detect>onchangenotempty</detect> { tgt: "set/field", det: "onchangenotempty" }
onfocus

<target>set/field</target><detect>onfocus</detect>

{ tgt: "set/field", det: "onfocus" }
ongroupitemadd

<target>set/group</target><detect>ongroupitemadd</detect>

{ tgt: "set/group", det: "ongroupitemadd" }
ongroupitemmove

<target>set/group</target><detect>ongroupitemmove</detect>

{ tgt: "set/group", det: "ongroupitemmove" }
ongroupitemmovedown

<target>set/group</target><detect>ongroupitemmovedown</detect>

{ tgt: "set/group", det: "ongroupitemmovedown" }
ongroupitemmoveup

<target>set/group</target><detect>ongroupitemmoveup</detect>

{ tgt: "set/group", det: "ongroupitemmoveup" }
ongroupitemremove

<target>set/group</target><detect>ongroupitemremove</detect>

{ tgt: "set/group", det: "ongroupitemremove" }
onhide <target>set/field</target><detect>onhide</detect> { tgt: "set/field", det: "onhide" }
onshow

<target>set/field</target><detect>onshow</detect>

{ tgt: "set/field", det: "onshow" }
valueis

<target>set/field</target>

<detect>valueis</detect>

<param>1</param>

{

    tgt: "set/field",

    det: "valueis"

    prm: "1"

}
valueisnot

<target>set/field</target>

<detect>valueisnot</detect>

<param>yes</param>

{

    tgt: "set/field",

    det: "valueisnot"

    prm: "yes"

}
valuelessthan

<target>set/field</target>

<detect>valuelessthan</detect>

<param>10</param>

{

    tgt: "set/field",

    det: "valuelessthan"

    prm: "10"

}
valuegreaterthan

<target>set/field</target>

<detect>valuegreaterthan</detect>

<param>10</param>

{

    tgt: "set/field",

    det: "valuegreaterthan"

    prm: "10"

}

Detection Boolean Operators

OPERATOR XML JSON
OR
(Default)
 <detections>
    <i>
        <target>set/field</target>
        <detect>valueis</detect>
        <param>1</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>valueis</detect>
        <param>2</param>
    </i>
</detections>

<actions_true>
    <i>
        <target>set/field</target>
        <action>addclasstopair</action>
        <param>myclass</param>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field</target>
        <action>removeclassfrompair</action>
        <param>myclass</param>
    </i>
</actions_false>		 {
    dets: [
        {
            tgt: "set/field",
            det: "valueis",
            prm: "1"
        },
        {
            tgt: "set/field",
            det: "valueis",
            prm: "2"
        }
    ],
    actst: [
        {
            tgt: "set/field",
            act: "addclasstopair",
            prm: "myclass"
        }
    ],
    actsf: [
        {
            tgt: "set/field",
            act: "removeclassfrompair",
            prm: "myclass"
        }
    ]
}
AND

<detections>
    <i>
        <target>set/field</target>
        <detect>valuegreaterthan</detect>
        <param>5</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>valuelessthan</detect>
        <param>10</param>
    </i>
</detections>

 

<bool_operator>AND</bool_operator>

<actions_true>
    <i>
        <target>set/field2</target>
        <action>showfield</action>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field2</target>
        <action>hidefield</action>
    </i>
</actions_false>

{
    dets: [
        {
            tgt: "set/field",
            det: "valuegreaterthan",
            prm: "5"
        },
        {
            tgt: "set/field",
            det: "valuelessthan",
            prm: "10"
        }
    ],
    bop: "AND",
    actst: [
        {
            tgt: "set/field2",
            act: "showfield"
        }
    ],
    actsf: [
        {
            tgt: "set/field2",
            act: "hidefield"
        }
    ]
}

 
XOR

<detections>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>coke</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>pepsi</param>
    </i>
</detections>

 

<bool_operator>XOR</bool_operator>

<actions_true>
    <i>
        <target>set/field2</target>
        <action>showfield</action>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field2</target>
        <action>hidefield</action>
    </i>
</actions_false>

 {
    dets: [
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "coke"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "pepsi"
        }
    ],
    bop: "XOR",
    actst: [
        {
            tgt: "set/field2",
            act: "showfield"
        }
    ],
    actsf: [
        {
            tgt: "set/field2",
            act: "hidefield"
        }
    ]
}
Greater Than N Detections Are True

<detections>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>smart</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>good-looking</param>
    </i>

    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>rich</param>
    </i>
</detections>

 

<bool_operator><![CDATA[>1]]></bool_operator>

<actions_true>
    <i>
        <target>set/field2</target>
        <action>showfield</action>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field2</target>
        <action>hidefield</action>
    </i>
</actions_false>

 {
    dets: [
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "smart"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "good-looking"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "rich"
        }
    ],
    bop: ">1",
    actst: [
        {
            tgt: "set/field2",
            act: "showfield"
        }
    ],
    actsf: [
        {
            tgt: "set/field2",
            act: "hidefield"
        }
    ]
}
Fewer Than N Detections Are True

<detections>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>red</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>green</param>
    </i>

    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>blue</param>
    </i>
</detections>

 

<bool_operator><![CDATA[<3]]></bool_operator>

<actions_true>
    <i>
        <target>set/field2</target>
        <action>showfield</action>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field2</target>
        <action>hidefield</action>
    </i>
</actions_false>

 {
    dets: [
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "red"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "green"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "blue"
        }
    ],
    bop: "<3",
    actst: [
        {
            tgt: "set/field2",
            act: "showfield"
        }
    ],
    actsf: [
        {
            tgt: "set/field2",
            act: "hidefield"
        }
    ]
}
Exactly N Detections Are True

<detections>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>you</param>
    </i>
    <i>
        <target>set/field</target>
        <detect>checkboxvaluecontains</detect>
        <param>me</param>
    </i>
</detections>

 

<bool_operator><![CDATA[=2]]></bool_operator>

<actions_true>
    <i>
        <target>set/field</target>
        <action>addclasstopair</action>
        <param>happiness</param>
    </i>
</actions_true>

<actions_false>
    <i>
        <target>set/field</target>
        <action>removeclassfrompair</action>
        <param>happiness</param>
    </i>
</actions_false>

{
    dets: [
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "you"
        },
        {
            tgt: "set/field",
            det: "checkboxvaluecontains",
            prm: "me"
        }
    ],
    bop: "=2",
    actst: [
        {
            tgt: "set/field",
            act: "addclasstopair",
            prm: "happiness"
        }
    ],
    actsf: [
        {
            tgt: "set/field",
            act: "removeclassfrompair",
            prm: "happiness"
        }
    ]
}

Actions

ACTION XML JSON
addclasstofieldcont <target>set/field</target>
<action>addclasstofieldcont</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "addclasstofieldcont"

    prm: "myclass"

}
addclasstolabelcont <target>set/field</target>
<action>addclasstolabelcont</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "addclasstolabelcont"

    prm: "myclass"

}
addclasstopair <target>set/field</target>
<action>addclasstopair</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "addclasstopair"

    prm: "myclass"

}
appendlabelwith <target>set/field</target>
<action>appendlabelwith</action>
<param><![CDATA[<span class='alert'>UNFILLED</span>]]></param>

{

    tgt: "set/field",

    act: "appendlabelwith"

    prm: "<span class='alert'>UNFILLED</span>"

}
disablefield

<target>set/field</target>
<action>disablefield</action>

or

<target>set/selectfield/2</target>
<action>disablefield</action>

{ tgt: "set/field", act: "disablefield" }

or

{ tgt: "set/selectfield/2", act: "disablefield" }
enablefield

<target>set/field</target>
<action>enablefield</action>

or

<target>set/selectfield/2</target>
<action>enablefield</action>

{ tgt: "set/field", act: "enablefield" }

or

{ tgt: "set/selectfield/2", act: "enablefield" }
hidefield <target>set/field</target>
<action>hidefield</action>

{

    tgt: "set/field",

    act: "hidefield"

}
prependlabelwith <target>set/field</target>
<action>prependlabelwith</action>
<param><![CDATA[<span class='alert'>UNFILLED</span>]]></param>

{

    tgt: "set/field",

    act: "prependlabelwith"

    prm: "<span class='alert'>UNFILLED</span>"

}
removeaugmenthtmlabove <target>set/field</target>
<action>removeaugmenthtmlabove</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmlabove"

}
removeaugmenthtmlbelow <target>set/field</target>
<action>removeaugmenthtmlbelow</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmlbelow"

}
removeaugmenthtmlfieldabove <target>set/field</target>
<action>removeaugmenthtmlfieldabove</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmlfieldabove"

}
removeaugmenthtmlfieldbelow <target>set/field</target>
<action>removeaugmenthtmlfieldbelow</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmlfieldbelow"

}
removeaugmenthtmllabelabove <target>set/field</target>
<action>removeaugmenthtmllabelabove</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmllabelabove"

}
removeaugmenthtmllabelbelow <target>set/field</target>
<action>removeaugmenthtmllabelbelow</action>

{

    tgt: "set/field",

    act: "removeaugmenthtmllabelbelow"

}
removeclassfromfieldcont <target>set/field</target>
<action>removeclassfromfieldcont</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "removeclassfromfieldcont"

    prm: "myclass"

}
removeclassfromlabelcont <target>set/field</target>
<action>removeclassfromlabelcont</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "removeclassfromlabelcont"

    prm: "myclass"

}
removeclassfrompair <target>set/field</target>
<action>removeclassfrompair</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "removeclassfrompair"

    prm: "myclass"

}
removeelementwithselector <target>set/field</target>
<action>removeelementwithselector</action>
<param>label span.alert</param>

{

    tgt: "set/field",

    act: "removeelementwithselector"

    prm: "label span.alert"

}
runfunction <target>MyFunction</target>
<action>runfunction</action>

{

    tgt: "MyFunction",

    act: "runfunction"

}
scrollto <target>set/field</target>
<action>scrollto</action>

{ tgt: "set/field", act: "scrollto" }
setaugmenthtmlaboveto <target>set/field</target>
<action>setaugmenthtmlaboveto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmlaboveto"

    prm: "<p>Field Info</p>"

}
setaugmenthtmlbelowto <target>set/field</target>
<action>setaugmenthtmlbelowto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmlbelowto"

    prm: "<p>Field Info</p>"

}
setaugmenthtmlfieldaboveto <target>set/field</target>
<action>setaugmenthtmlfieldaboveto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmlfieldaboveto"

    prm: "<p>Field Info</p>"

}
setaugmenthtmlfieldbelowto <target>set/field</target>
<action>setaugmenthtmlfieldbelowto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmlfieldbelowto"

    prm: "<p>Field Info</p>"

}
setaugmenthtmllabelaboveto <target>set/field</target>
<action>setaugmenthtmllabelaboveto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmllabelaboveto"

    prm: "<p>Field Info</p>"

}
setaugmenthtmllabelbelowto <target>set/field</target>
<action>setaugmenthtmllabelbelowto</action>
<param><![CDATA[<p>Field Info</p>]]></param>

{

    tgt: "set/field",

    act: "setaugmenthtmllabelbelowto"

    prm: "<p>Field Info</p>"

}
setfieldvalueto
(Also works radio and checkbox fields. To check multiple checkboxes, pass pipe-seperated values.)		 <target>set/field</target>
<action>setfieldvalueto</action>
<param>val</param>

{

    tgt: "set/field",

    act: "setfieldvalueto"

    prm: "val"

}
setfocusto <target>set/field</target>
<action>setfocusto</action>

{ tgt: "set/field", act: "setfocusto" }
setlabelto <target>set/field</target>
<action>setlabelto</action>
<param>New Label</param>

{

    tgt: "set/field",

    act: "setlabelto"

    prm: "New Label"

}
settochecked
(For radio or checkbox fields. Index starts with 0.)

<target>set/field/1</target

<action>settochecked</action>

{

    tgt: "set/field/1",

    act: "settochecked"

}
showfield <target>set/field</target>
<action>showfield</action>

{

    tgt: "set/field",

    act: "showfield"

}
togglefieldcontclass <target>set/field</target>
<action>togglefieldcontclass</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "togglefieldcontclass"

    prm: "myclass"

}
togglelabelcontclass <target>set/field</target>
<action>togglelabelcontclass</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "togglelabelcontclass"

    prm: "myclass"

}
togglepairclass <target>set/field</target>
<action>togglepairclass</action>
<param>myclass</param>

{

    tgt: "set/field",

    act: "togglepairclass"

    prm: "myclass"

}
uncheckall
(For radio or checkbox fields.)

<target>set/field</target

<action>uncheckall</action>

{

    tgt: "set/field",

    act: "uncheckall"

}
updatefieldoptions <target>set/field</target>
<action>updatefieldoptions</action>
<param>newoptions</param>

{

    tgt: "set/field",

    act: "updatefieldoptions"

    prm: "newoptions"

}

Global Functions

Name Arguments COMMENTS
JFS.Packages Form Id Exposes packages for all forms on the page by id.
JFS.ParseFormXml Form XML String
 Converts XML form definition to JSON object.
JFS.ParseValuesXml Values XML String Converts XML values definition to JSON object.
JFS.PerformFormActions Array of Action Objects

Example:

JFS.PerformFormActions([{ tgt: "set/field", act: "removeclassfrompair", prm: "required_unfilled" }], pack);
JFS.GetSelectOptions Select Options Object

Returns the HTML equivalent of an options object.

Example:

 

JFS.ParseSelectOptions([ {l:"Yes",v:"yes"}, {l:"No",v:"no"} ])

 

will return:

 

"<option value='yes'>Yes</option>
<option value='no'>No</option>"
JFS.ParseModifiersList Modifiers List Returns an object of all the modifiers in the provided list, using each modifiers "k" value as its key.
JFS.ParseModifierParamsList Modifier Parameters List  Returns an object of all the parameters in the provided list, using each parameter's "k" value as its key.
JFS.Ready Values Object, Form Package Will be executed when a form has completed its initialization process and is rendered and ready to use.
JFS.Changed DOM Field, Form Key, Value After Change, Value Before Change, All Form Values, Unfilled Fields, Form Package, Change Trigger

Will be executed whenever a form changes. Change Trigger values can be "user", "usergroupitemadd", "usergroupitemremove", "usergroupitemup", "usergroupitemdown", "external", and "customoptionsinit".
JFS.TextKeyUp JS Event Object, DOM Field, Form Key, Value After Key Up, Value Before Key Up, Form Package, Callback Function Will be executed on "keyup" event on any text or textarea. Provides an opportunity to intercept keyboard events for field formatting purposes.
JFS.GetCurrentValues Form Package Returns Values Object based on current form state.
JFS.GetCurrentFieldValue Form Key, Form Package Returns the value of a field.
JFS.TriggerAutoCompleteSubmit Form Package

Used in conjunction with form option "IncludeAutoCompleteTrigger".

 

Tricks the browser into saving the current form data as if it was submitted so if a user returns to the form, the browser can present auto-complete info.
JFS.RegisterExternalChange DOM Field

Tells the library that a field value has been updated by JavaScript so it can process the change. Once processed, the change event will execute the package's Changed function with the trigger set to "external".
JFS.TriggerBlurByFieldKeys Array of Form Keys, Form Package Triggers "blur" event on list of keys.
JFS.SetTabIndexes jQuery Selector or no value for all visible fields on the page.
 Sets a sequential "tabindex" attribute on all visible fields in the order they appear in HTML. This function is run by default during the Init sequence. To prevent it from running, add "ResetPageTabIndexes: false" to settings object.

Key List

XML JSON COMMENTS
action act  
actions_false actsf  
actions_true actst  
autofocus a  
autocomplete c  
control_btns cbts Repeatable group buttons.
detect det  
detections dets  
disabled d

Select, radio, and checkbox fields support this key both on the entire field and on individual options (targeted by zero-based option index).
field_btns fbts  
field_sets sets  
field_value fv  
fields fs  
i   Array element, so no key for JSON.
inline in  
interactions ints  
jfs jfs Root node for both XML and JSON.
key k  
label l  
label_position lp  
legend lg  
mods m  
mods_group_fields mgf For adding mods to specific repeatable groups.
option_label_position olp  
options os  
options_predefined osp  
param prm  
params prms  
placeholder p  
show s  
target tgt  
type t  
value v  
values vs