- SimpleForm.js -

Introduction

Javascript FormBuilder for Bootstrap and JoB.js inspired by simple_form.

JoB.SimpleForm Setup

Make the helper available:

window.simpleForm = new JoB.SimpleForm.Base()

Add a Backbone.Model for demonstaration:

window.user = new Backbone.Model({
  id: 1,
  name: 'Hans Plastiktüte',
  email: 'hans@example.com',
  role_id: 2,
  newsletter: 1,
  lang: 'de_DE',
  bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit...',
  wake_up_time: "08:30",
  birthday: '1981-11-19',
  website: 'https://staffomatic.com'
});
user.modelName = 'User';

Basic usage is as follow:

simpleForm.input(ressource,  fieldName,
  options = {},
  inputOptions = {},
  labelOptions = {},
  wrapperOptions = {}
)

ressource — String or Backbone.Model
Provide a ressource Name, Backbone.Model or Hash
fieldName — String
model.get('fieldName') or {fieldName: 'value'}
options — Object
as — String 'string'
collection — Array
placeholder — String
label — String
hint — String
inputOptions — Object {}
labelOptions — Object {}
wrapperOptions — Object {class: 'form-group'}
Html-Options for the wrapper element.

Examples

Basic example
A complete form example with placeholders, hints and more.

a = [
simpleForm.input(user, 'name', {placeholder: 'User Name'}),
simpleForm.input(user, 'email', {placeholder: 'User E-Mail'}),
simpleForm.input(user, 'avatar', {label: 'Upload avatar', as: 'file', hint: 'Select selfie'}),
simpleForm.input(user, 'role_id', {label: 'Role', collection: [[1, 'Admin'], [2, 'Manager']]}),
simpleForm.input(user, 'newsletter', {label: 'Subscribe to Newsletter', as: 'boolean'}),
simpleForm.button('Submit')
].join("");

String input with a varity of options

simpleForm.input("User", 'name',
  {label: 'Username', placeholder: 'Please provide a username'}, // options
  {disabled: 'disabled', class: 'extra-input-class', css: {width: '50%'}}, // inputOptions
  {class: 'extra-label-class'}, // labelOptions
  {class: 'extra-wrapper-class'} // wrapperOptions
)

Validation states

simpleForm.input(user, 'name',
  {label: 'Username', placeholder: 'Please provide a username'},
  {}, // inputOptions
  {}, // labelOptions
  {class: 'has-success'}
)

Input with icons

simpleForm.input("User", 'name',
  {icons: 'glyphicon glyphicon-ok form-control-feedback'},
  {},
  {},
  {class: 'has-success has-feedback'}
)

Help text and placeholders

simpleForm.input("User", 'name',
  {placeholder: 'Your Username', hint: 'You should pick a uniq username'}
)

Input groups

simpleForm.input("User", 'name',
  {addonText: '@'}
)

simpleForm.input("User", 'name',
  {addonText: '@', addonPosition: 'left'}
)

JoB.SimpleForm.input

booleansimpleForm.input(ressource, fieldName, [options]);

simpleForm.input(user, 'newsletter', {
    label: 'Subscribe to Newsletter',
    as: 'boolean'
  })

checkboxessimpleForm.input(ressource, fieldName, [options]);

simpleForm.input(user, 'role_id', {
  as: 'checkboxes', collection: roles
});

datetimenot yet implemened

datesimpleForm.input(ressource, fieldName, [options]);

simpleForm.input(user, 'birthday', {
  as: 'date'
});

decimalnot yet implemened

emailinput(ressource, fieldName, {as: 'email'})

simpleForm.input(user, 'email', {as: 'email'})

fileinput(ressource, fieldName, {as: 'file'})

simpleForm.input(user, 'avatar',
  {as: 'file'}, {multiple: true}
)

floatnot yet implemened

fileinput(ressource, fieldName, {as: 'hidden'})

simpleForm.input(user, 'lang',{as: 'hidden'})

integernot yet implemened

selectinput(ressource, fieldName, {collection: roles})
Providing a valid collection will result in a select tag.

simpleForm.input(user, 'role_id',
  {collection: roles}
)

stringinput(ressource, fieldName)

simpleForm.input(user, 'name')

telinput(ressource, fieldName, {as: 'tel'})

simpleForm.input(user, 'mobile', {as: 'tel'})

passwordinput(ressource, fieldName, {as: 'password'})

simpleForm.input(user, 'password', {as: 'password'})

radiobuttonsinput(ressource, fieldName, {as: 'radiobuttons'})

simpleForm.input(user, 'role_id',
  {as: 'radiobuttons', collection: roles}
)

rangeinput(ressource, fieldName, {as: 'range'})

simpleForm.input(user, 'range',
  {as: 'range'}
)

searchinput(ressource, fieldName, {as: 'search'})

simpleForm.input('search', 'user_name',
  {as: 'search'}
)

textinput(ressource, fieldName, {as: 'text'})

simpleForm.input(user, 'bio',
  {as: 'text'}
)

textareaalias for text

timeinput(ressource, fieldName, {as: 'time'})

simpleForm.input(user, 'wake_up_time',
  {as: 'time'}
)

urlinput(ressource, fieldName, {as: 'url'})

simpleForm.input(user, 'website',
  {as: 'url'}
)

Input Mapping

INPUT_MAPPING =
  boolean: 'checkBoxTag'
  checkboxes: 'checkBoxTag'
  datetime: 'datetimeFieldTag'
  date: 'dateFieldTag'
  decimal: 'input'
  email: 'emailFieldTag'
  file:  'fileFieldTag'
  float: 'input'
  hidden:  'hiddenFieldTag'
  integer: 'input'
  select: 'selectTag'
  string:  'textFieldTag'
  tel: 'telephoneFieldTag'
  password:  'passwordFieldTag'
  radiobuttons: 'radioButtonTag'
  range: 'rangeFieldTag'
  search:  'searchFieldTag'
  text: 'textAreaTag'
  textarea: 'textAreaTag'
  time: 'timeFieldTag'
  url: 'urlFieldTag'

Change Log

0.0.2 — March 25, 2014 — Diff — Docs

• Added examples to Documentation for inputOptions, Validation states, Input with icons, Help text and placeholders, Input groups
• Added input groups support

0.0.1 — March 24, 2014 —

• Pre-Release of of SimpleForm.js