jQuery Form'n'Field documentation

Plug-In: Home Documentation Change Log Download
Documentation: Home Form Data types Input types Online demo

Description

The Form'n'Field plug-in lets you handle a form with its fields and access its typed values, detect changes, validate and cancel it.

First create a set of usual HTML input fields. They may be grouped into a FORM tag but it is not mandatory. Each field must have its identifier.

Then call jQuery.iForm.create(formName, settings) that binds all the events and methods.

See also: Custom data types, Custom input types

jQuery.iForm.create settings

  • [mandatory] fields associative array where keys are field identifiers and values are field settings.
  • [optional] onDirtyChange(bDirty) function called when the form content changes compared to its initial value.
    bDirty is false if all the field values are identical to initial values.
    'this' is a reference to the form object.
  • [optional] onUpdateAspect() function called when a field state (focus, validation) has changed. If provided at form level, this function is passed to each field.

Field settings

  • [optional] dataType name of the predefined data type ('int', 'float', or 'email') or of the custom data type of the field. If omitted, the field type is considered as string. This parameter is used to read and write the field value and convert it into appropriate type.
    For example a SELECT input field value is a string, and you can handle it as an integer if you stored identifiers into option values.
  • [optional] inputType name of the predefined input type ('textbox', 'radiolist', 'checkbox' or 'choicelist') or of the custom input type of the field. If omitted, each input type is tested (its detect method is called) starting with custom types.
  • [optional] onValidate function called when the field value has changed. The function must return true if the value is valid.
  • [optional] onUpdateAspect() function called when the field state (focus, validation) has changed.
  • [optional] onInit() function called once when the field is initialized. It is the right place to add event handlers and other custom initializations.

Example

var form=jQuery.iForm.create('contact',{
   onDirtyChange:dirtyForm,
   fields:{
      FirstName:{},
      Age:{dataType:'int'},
      Profession:{},
      Email:{dataType:'email'},
      ProEmail:{},
      Pass:{onValidate:function(){
         return this.get().length > 5;
      }},
      Referrer:{dataType:'int'},
      Comment:{}
   }
});
function dirtyForm(bDirty){
   $('#Save')[0].disabled=(bDirty?'':'disabled');
}