Managed Form Fields

During Jaffa's instantiation process it will look through your page trying to find 'form' fields that you have flagged as significant for it to manage. As per the information on the 'Data' tab the IDs used should line up with the JSON keys coming from the server.

By default you can flag these fields simply by adding class="jaffa-field", however you can provide an overriding CSS Selector during startup, making them as complicated (or broad) as you like. For example, you could provide a selector to say that every input in a particular form is important:

var jaffa = jaffaFactory({
        selectorFormFields: "form#myFormId input",
    });

From here Jaffa will take care of the rest, although it does have some fairly sensible requirements for uniqueness, but these are in line with HTML standards anyway. Each managed field must have an id that is unique within the document, or radio groups use a name instead. The 'Examples' section below shows a variety of field definitions that Jaffa will find correctly.

Once the field is managed, you can access/manipulate the field using Jaffa's APIs. For most generic fields you might not even want to do this, but for some fields where you need to get a bit fancy these will make your life easier. Specifics on these APIs can be found under 'Jaffa.form' on the 'Details' tab.

Examples

Text Inputs

Very basic, and functionally identical to 'hidden', 'password' inputs.

<input class="jaffa-field" type="text" id="testFieldOne" />
eg.

Help text is slightly faded

Textarea tags

For ye' olde multi-line text.

<textarea class="jaffa-field" id="testFieldTwo" rows="2" cols="40"></textarea>
eg.

Styled for an example error (using Bootstrap)

Checkbox inputs

Send the value to the server if checked, or nothing.

<input class="jaffa-field" type="checkbox" id="testFieldThree" value="checkbox1" />
eg.
Radio inputs

You'll note we use name for the field, as in a normal form.

<input class="jaffa-field" type="radio" name="testFieldFour" value="radio1"/>
<input class="jaffa-field" type="radio" name="testFieldFour" value="radio2"/>
<input class="jaffa-field" type="radio" name="testFieldFour" value="radio3"/>
eg.
Select drop-downs

Send the value of the selected option to the server.

<select class="jaffa-field" id="testFieldFive">
    <option value="select1">one</option>
    <option value="select2" selected="selected">two</option>
    <option value="select3">three</option>
</select>
eg.