Top

Fancy Form

In this documentation you will fast learn how start doing forms on Fancy Form and API of library.

Download and include

First of all you need to download library from github

After that you need to unzip library and place subfolder fancyform in place from which you plan to include library files

Now you need to include JQuery and FancyForm files on your page 

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="fancyform/fancyform.min.css">

<!-- JavaScript -->
<script src="fancyform/fancyform.min.js"></script>

Where to render

Add div with id where you plane to render form on page

<div id="form"></div>

First form

Let us do first(empty) form.
After including all .js and .css files, insert/include one more with code. 

$('#form').FancyForm({
  width: 295,
  height: 200,
  items: []
});
empty form

This code will do empty form. As you see we need id of where to render and 3 must-be params.
They are: width, height and items.
width and height are number, items is array.

Title

Let us add to our empty form title 

$('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  items: []
});
title form

title param could be string or object. About object value in other samples.

Buttons

$('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  items: [],
  buttons: [{
    text: 'Submit',
    handler: function(){
      console.log('submit');
    }
  },{
    text: 'Dismiss',
    handler: function(){
      console.log('dismiss');
    }
  }]
});
buttons form

buttons is array or object
Every button has following params: text - string, handler - function.

First fields

Now, let us add the most interesting.
First fields. 

$('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  items: [{
    label: 'Name',
    type: 'string'
  },{
    label: 'SurName',
    type: 'string'
  }],
  buttons: [{
    text: 'Submit',
    handler: function(){
      console.log('submit');
    }
  },{
    text: 'Dismiss',
    handler: function(){
      console.log('dismiss');
    }
  }]
});
first fields form

items is array.
In this sample we have 2 fields. Both has params type - string and label - string.
It is text of field label.
type is the most important param of fields.
Here are all type-s values: string, number, textarea, checkbox, combo, password, hidden, line.

All properties

In FancyForm({... there are many properties. Here is list of them.

activeTab

activeTab is used that define tab that will be shown on start.
Is used if in items type is tab

activeTab is number

buttons

Buttons are placed in bottom of form.
Buttons could be defined as array or as object.
If they are array than you can use following properties for each:
text, handler.
Inside of handler function scope is form. So if you run this you can use methods of form.
First param in handler is button, you can run method setText and change button text.
If it is object you need to define items inside and height of buttons bar(if needed).
FancyForm does not read css that to work fast.

buttons is array | object

defaults

When there are many fields and some params repeated,
you can define in defaults properties that are repeated that
to do code less.

$('#form').FancyForm({
  width: 295,
  height: 200,
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name0',
    emptyText: 'Name0',
    name: 'name0'
  },{
    label: 'Name1',
    labelAlign: 'left',
    emptyText: 'Name1',
    name: 'name1'
  },{
    label: 'Name2',
    labelAlign: 'top',
    emptyText: 'Name2',
    name: 'name2'
  },{
    label: 'Name3',
    labelAlign: 'right',
    emptyText: 'Name3',
    name: 'name3'
  }]
});
label align right left top width form

events

You can set handler for several events that occurs in form.
It is possible to set event both in some field and of all form fields.
Here are main events: key.

events: [{
  key: function(form, index, value){
    form.set(index, value.toUpperCase())                
  }
}]

events is array

height

height set form width

height is number

inputWidth

Default widths in our sample is small so
let us do them longer.

$('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  inputWidth: 150,
  items: [{
    label: 'Name',
    type: 'string'
  },{
    label: 'SurName',
    type: 'string'
  }],
  buttons: [{
    text: 'Submit',
    handler: function(){
      console.log('submit');
    }
  },{
    text: 'Dismiss',
    handler: function(){
      console.log('dismiss');
    }
  }]
});
inputWidth form

inputWidth is number

labelWidth

Let us also do label width longer.
Because input goes after label, doing label longer would
translate input a bit. No other view changes are visible.

$('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  labelWidth: 90,
  inputWidth: 150,
  items: [{
    label: 'Name',
    type: 'string'
  },{
    label: 'SurName',
    type: 'string'
  }],
  buttons: [{
    text: 'Submit',
    handler: function(){
      console.log('submit');
    }
  },{
    text: 'Dismiss',
    handler: function(){
      console.log('dismiss');
    }
  }]
});
label width form

labelWidth is number

labelAlign

Let us also do label align.
labelAlign can have 3 values:
right, left and top.
default is left.

$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    type: 'string',
    label: 'Name0',
    emptyText: 'Name0',
    name: 'name0'
  },{
    type: 'string',
    label: 'Name1',
    labelAlign: 'left',
    emptyText: 'Name1',
    name: 'name1'
  },{
    type: 'string',
    label: 'Name2',
    labelAlign: 'top',
    emptyText: 'Name2',
    name: 'name2'
  },{
    type: 'string',
    label: 'Name3',
    labelAlign: 'right',
    emptyText: 'Name3',
    name: 'name3'
  }]
});
label align right left top width form

labelAlign is string(right|left|top)

tabs

You can use items type tab in two cases.
1 - to switch between tabs over buttons
2 - or if you define property tabs with string names
like tabs: ['First', 'Second', 'Third']


tabs is array

title

title can be string or object.
If it is string than it set text of title.
If it is object than you need to define text of title as text property.
Also you can define in object height. To set height of title you need use only
object. FancyForm does not read your css style that to work fast.

title is number | object

tools

tools is group of right title elements.
For each you can define properties: text, handler
Inside of handler function scope is form. So if you run this you can use methods of form.
First param in handler is tool, you can run method setText and change tool text.

tools: [{
  text: 'Close',
  handler: function(){
    this.hide();
  }
}]

tools is array

width

width set form width

width is number

Valid(Validation)

In FancyForm you can easily do validation.
For that there are:
1 - property valid in every field
2 - function FancyForm.vtype
Let us learn how to use them.

valid has 3 properties:
blank - is boolean, determine is allowed blank field.
By default is allowed.
blankText - error text that shows if field is blank.
type - type of validation. There is only one built-in validation types
email. For others there is function FancyForm.vtype

FancyForm.vtype(object). You should set several properties for object.
type - it will be used in valid.
text - it is error text that will be shown if value is not valid.
blankText - it is error text for blank. It is not necessary.
re - it is RegExp of testing value but you can do checking value by function.
fn - it is checking function that test value is valid. But you can use RegExp.

FancyForm.vtype({
  type: 'email',
  re: /^(")?(?:[^\."])(?:(?:[\.])?(?:[\w\-!#$%&'*+\/=?\^_`{|}~]))*\[email protected](\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
  blankText: 'required',
  text: 'Incorect email'
});

FancyForm.vtype({
  type: 'age',
  fn: function(value){
    return value>20 && value<80;
  },
  text: 'Age should be more 20 and less 80'
});

$('#form').FancyForm({
  width: 295,
  height: 200,
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    emptyText: 'Name',
    valid: {
      blank: false,
      blankText: 'Required'
    },
    name: 'name'
  },{
    label: 'E-mail',
    emptyText: 'E-mail',
    valid: {
      type: 'email',
      blank: false
    },
    name: 'email'
  },{
    type: 'number',
    label: 'Age',
    name: 'age',
    valid: {
      type: 'age'
    }
  }]
});
label align right left top width form

blank is boolean
blankText is string
type is string

Submit to server(ajax)

Our sample is still far from really used form.
Let us add in it submiting to server.
For that we need to do at least 4 things:
1) Every field must has unique name and 2)form must has url where to sumbit,
3) has reference on our form, 4)run form submit function.


This sample is simple, so on server after submit you can get values of form for example for php like this. $_GET['name']; $_GET['surname'];


Also you can change method of sending data.
By defaul is GET. You can set for example: POST
method


Also you can need send some extra params, not only values of form.
For that there is object params

var myForm = $('#form').FancyForm({
  title: 'Form Title',
  width: 295,
  height: 200,
  labelWidth: 90,
  inputWidth: 150,
  url: 'ajax.php',
  method: 'POST',
  params: {
    myParam: 1,
    myParam2: 'param 2'
  },
  items: [{
    label: 'Name',
    type: 'string',
    name: 'name'
  },{
    label: 'SurName',
    type: 'string',
    surname: 'surname'
  }],
  buttons: [{
    text: 'Submit',
    handler: function(){
      form.submit();
    }
  },{
    text: 'Dismiss',
    handler: function(){
      console.log('dismiss');
    }
  }]
});
submit to server ajax form

name is string
url is string
method is string
params is object
var myForm = $('#form').FancyForm({... - ...FancyForm(... returns object
myForm.submit() is function

String field params

Let us learn all string field params


label is text of field
type is type of field (value - string)
name is name of field over which it is possible to get value of field
emptyText is placeholder text in field
events helps to set event handler to field
value is value of field on start
labelAlign is align of label


Events: focus, blur, change, key 


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    label: 'Name',
    type: 'string',
    name: 'name',
    emptyText: 'Write your name',
  }]
});

string field form

label is string|boolean
type is string (value - string)
name is string
emptyText is string
events is array
value is string/number
labelAlign is string(right|left|top)

Number field params

Let us learn all number field params


label is text of field.
type is type of field (value - number).
name is name of field over which it is possible to get value of field.
emptyText is placeholder text in field.
events helps to set event handler to field
min is minimal value of field.
max is maximum value of field.
value is maximum value of field.
labelAlign is align of label.
valid is validation of field.


Events: focus, blur, change, key 


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    label: 'Age',
    type: 'number',
    name: 'age',
    emptyText: 'Write your age',
    min: 0,
    max: 100
  }]
});

string field form

label is string|boolean
type is string (value - string)
name is string
emptyText is string
events is array
min is number
max is number
value is number
labelAlign is string(right|left|top)
valid is object

TextArea field params

Let us learn all textarea field params.
In this sample we also learn how to hide label.


label is text of field.
type is type of field (value - textarea).
name is name of field over which it is possible to get value of field.
emptyText is placeholder text in field.
events helps to set event handler to field
min is minimal value of field.
max is maximum value of field.
value is value of field.
labelAlign is align of label
valid is validation of field


Events: focus, blur, change, key 


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    label: false,
    type: 'textarea',
    inputWidth: 260,
    name: 'about',
    emptyText: 'About'
  }]
});

string field form

label is string|boolean
labelAlign is string(right|left|top)
events is array
name is string
type is string (value - string)
valid is object
value is boolean

HTML field params

Let us learn all html field params.
This field is for displaying html data.


type is type of field (value - html).
value is value of field.


$('#form').FancyForm({
  width: 295,
  height: 230,
  items: [{
    type: 'html',
    value: [
      '<div style="color: #777;font-size: 13px;">',
        'Hi, I am cat :)</br>',
        'It is HTML field sample for FancyForm.</br>',
        '<div style="text-align: center;padding-top: 10px;">',
          '<img style="text-align: center;" src="cool.png">',
        '</div>',
      '</div>'
    ].join("")
  }]
});

string field form

type is string (value - html)
value is boolean

CheckBox field params

Let us learn all checkbox field params.


events helps to set event handler to field
label is text of field.
labelAlign is align of label
name is name of field over which it is possible to get value of field.
type is type of field (value - checkbox).
value is value of field.


Events: change 


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    label: 'Married',
    type: 'checkbox',
    name: 'married',
    value: true
  }]
});

string field form

label is string|boolean
type is string (value - string)
events is array
name is string
value is boolean
labelAlign is string(right|left|top)

Radio field params

Let us learn all radio field params.


events helps to set event handler to field
label is text of field.
type is type of field (value - radio).
name is name of field over which it is possible to get value of field.
value is value of field, it will do checked of radio elements that has the same value.
labelAlign is align of label
column is boolean. It determines if radio elements will be layouted inline.


Events: change 


$('#form').FancyForm({
  title: 'Radio Fields',
  width: 370,
  height: 250,
  labelWidth: 80,
  items: [{
    type: 'radio',
    label: 'Favorite car brand?',
    name: 'brand',
    value: 'kia',
    items: [{
      text: 'KIA',
      value: 'kia'
    },{
      text: 'Honda',
      value: 'honda'
    },{
      text: 'Land Rover',
      value: 'lr'
    },{
      text: 'Toyota',
      value: 'toyota'
    }]
  },{
    type: 'radio',
    label: 'Favorite SUV?',
    name: 'suv',
    column: true,
    items: [{
      text: 'KIA Sportage',
      value: 'sportage'
    },{
      text: 'Toyota Land Cruiser',
      value: 'landcruiser'
    },{
      text: 'Honda CR-V',
      value: 'crv'
    },{
      text: 'Range Rover Sport',
      value: 'rrs'
    }]
  }]
});

radio field form

events is array
label is string|boolean
type is string (value - string)
name is string
value is boolean
labelAlign is string(right|left|top)
column is boolean

Combo field params

Let us learn all combo field params.


events helps to set event handler to field
label is text of field.
type is type of field (value - combo).
name is name of field over which it is possible to get value of field.
value is value of field.
data is array of fields.
displayKey is key that define what value take to show in combo.
valueKey is key that take value from data rows.
labelAlign is align of label


Events: change 


var comboData = [
  {index: 0, country: 'USA'},
  {index: 1, country: 'Canada'}
];

$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: comboData,
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  }]
});

string field form

events is array
label is string|boolean
type is string (value - string)
name is string
value is mixed
data is array
displayKey is string
valueKey is valueKey
labelAlign is string(right|left|top)

Password field params

Let us learn all password field params.


events helps to set event handler to field
label is text of field.
type is type of field (value - password).
name is name of field over which it is possible to get value of field.
emptyText is placeholder text in field.
value is value of field on start


Events: change 


$('#form').FancyForm({
  width: 295,
  height: 200,
    items: [{
    label: 'Pass',
    emptyText: 'Pass',
    allowBlank: false,
    name: 'pass',
    type: 'password'
  }]
});

password field form

events is array
label is string|boolean
type is string (value - password)
name is string
emptyText is string
value is string

hidden field params

Let us learn all hidden field params.


type is type of field (value - hidden).
name is name of field over which it is possible to get value of field.
value is value of field on start


Events: change 


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    name: 'hidden',
    type: 'hidden',
    value: 'Some value'
  }]
});

hidden field form

type is string (value - hidden)
name is string
value is mixed

line field params

Line is for layouting fields inline.


type is type of field (value - line)
items is fields that should be layouted inline
defaults is default properties for fields in items


$('#form').FancyForm({
  width: 295,
  height: 200,
  items: [{
    type: 'line',
    defaults: {
      labelAlign: 'top'
    },
    items: [{
      type: 'string',
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    },{
      type: 'string',
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    }]
  }]
});

hidden field form

type is string (value - line)
items is array
defaults is object

set field params

Set is for grouping fields in wrapper.


label is text of field.
type is type of field (value - set)
items is fields that should be grouped by set
defaults is default properties for fields in items
checkbox is property to show checkbox in label.
Over checkbox it is possible to hide show items.
If checkbox value is false, than it will appear unchecked and fields will be hidden.

tab field params

Set is for grouping fields in wrapper.


type is type of field (value - tab)
items is fields that should be grouped by set
defaults is default properties for fields in items


$('#form').FancyForm({
  title: 'Multi forms',
  theme: 'blue',
  width: 285,
  height: 300,
  activeTab: 0,
  items: [{
    type: 'tab',
    defaults: {
      inputWidth: 180,
      labelWidth: 55,
    },
    items: [{
      type: 'string',
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    },{
      type: 'string',
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    },{
      type: 'password',
      label: 'Pass',
      emptyText: 'Pass',
      name: 'pass'
    }]
  },{
    type: 'tab',
    defaults: {
      inputWidth: 180,
      labelWidth: 55,
    },
    items: [{
      type: 'number',
      label: 'Age',
      name: 'age',
      min: 20,
      max: 100
    },{
      type: 'checkbox',
      label: 'Married',
      name: 'married'
    }]
  },{
    type: 'tab',
    defaults: {
      inputWidth: 180,
      labelWidth: 55,
    },
    items: [{
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: [
        {index: 0, country: 'USA'},
        {index: 1, country: 'Canada'}
      ],
      displayKey: 'country',
      valueKey: 'index',
      value: 0
    },{
      type: 'textarea',
      inputWidth: 250,
      height: 110,
      emptyText: 'About',
      label: false,
      name: 'about'
    }]
  }],
  buttons: [{
    text: 'Prev',
    disabled: true,
    handler: function(button){
      this.prevTab();
      if( this.activeTab === 0 ){
        button.disable();
      }
      this.buttons[1].enable();
    }
  },{
    text: 'Next',
    handler: function(button){
      this.nextTab();
      if( this.activeTab === 2 ){
        button.disable();
      }
      this.buttons[0].enable();
    }
  }]
});

tab field form

type is string (value - tab)
items is array
defaults is object

Themes

In FancyForm there are 3 themes.
They are: 'default', blue, light-blue
To set not default theme use property theme.

If you need your own theme here is sample how to do it over changing css

theme - string('default'|'blue'|'light-blue')

hidden field form

Form methods


get return all form fields' values
get('name') return only one field value
clear clear all fields and remove validation text errors
set('name', newValue) set new field value
submit submit form to server
valid check if form is valid