In this documentation you will fast learn how start doing forms on Fancy Form and API of library.
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>
Add div with id where you plane to render form on page
<div id="form"></div>
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: [] });
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.
Let us add to our empty form title
$('#form').FancyForm({ title: 'Form Title', width: 295, height: 200, items: [] });
title
param could be string or object.
About object value in other samples.
$('#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
is array or object
Every button has following params:
text
- string, handler
- function.
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'); } }] });
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
.
FancyForm({...
there are many properties. Here is list of them.
activeTab is used that define tab that will be shown on start.
Is used if in items type is tab
activeTab
is number
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' }] });
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 set form width
height
is number
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
is number
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'); } }] });
labelWidth
is number
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' }] });
labelAlign
is string(right|left|top)
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 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 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 set form width
width
is number
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' } }] });
blank
is boolean
blankText
is string
type
is string
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'); } }] });
name
is string
url
is string
method
is string
params
is object
var myForm = $('#form').FancyForm({...
- ...FancyForm(...
returns object
myForm.submit()
is function
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', }] });
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)
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 }] });
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
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' }] });
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
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("") }] });
type
is string (value - html)
value
is boolean
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 }] });
label
is string|boolean
type
is string (value - string)
events
is array
name
is string
value
is boolean
labelAlign
is string(right|left|top)
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' }] }] });
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
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 }] });
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)
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' }] });
events
is array
label
is string|boolean
type
is string (value - password)
name
is string
emptyText
is string
value
is string
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' }] }] });
type
is string (value - line)
items
is array
defaults
is object
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.
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(); } }] });
type
is string (value - tab)
items
is array
defaults
is object
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')
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