Build forms for Titanium with just an object.
JavaScript
Latest commit 43e16f1 Nov 23, 2016 @Jei Jei Added method getFieldsMap()
Permalink
Failed to load latest commit information.
controllers
styles
views
LICENSE
README.md
widget.json

README.md

Ti.FormBuilder

com.caffeinalab.titanium.formbuilder

You're a developer, and the most annoying thing you can do are forms.

So, let's build forms with just an object literal.

Via Gittio

gittio install com.caffeinalab.titanium.formbuilder

Via Github

Download the latest release and add in your config.json, under dependencies:

"dependencies": {
    "com.caffeinalab.titanium.formbuilder": "*"
}

Usage

var form = Alloy.createWidget('com.caffeinalab.titanium.formbuilder', {
    fields: [
        { name: 'first_name' },
        { name: 'last_name' },
        // See below
    ]
});

Options

askBeforeSubmit (Boolean): Show an option dialog before the real submit
submitTitle (String): The title of the submit button

Options for the field

name (String): The name (ID) of this field
type (String): The type of this field

Possible values are:

  • text
  • password
  • passwordEye
  • email
  • boolean
label (String): The text of the label to show above the input
group (String): A text used to group similar inputs
placeholder (String): A placeholder for the input
required (Boolean): Indicate the field is required and will throw validation errors
validator (Function): A custom validator function.

It must return true if everything's ok, a message string otherwise.

Sample fields definition

var fields = [
{
    name: 'email',
    type: 'email',
    label: 'EMAIL',
    placeholder: 'mario.rossi@gmail.com',
    group: 'I tuoi dati di accesso',
    required: true,
    validator: function(value) {
        if (!/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i.test(value)) {
            return "Email non valida";
        }
        return true;
    }
},
{
    name: 'password',
    type: 'passwordEye',
    label: 'LA TUA PASSWORD',
    placeholder: 'Password',
    group: 'I tuoi dati di accesso',
    required: true,
    validator: function(value) {
        if (value.length < 8) return "Inserisci una password di almeno 8 caratteri";
        return true;
    }
},
{
    name: 'first_name',
    type: 'text',
    label: 'NOME',
    placeholder: 'Mario',
    required: true,
    group: 'Le tue informazioni personali'
},
{
    name: 'privacy',
    type: 'boolean',
    label: 'PRIVACY POLICY',
    placeholder: 'Ho letto e accettato la privacy policy',
    required: true,
    group: 'Consenso'
}
];

Fully stylable via Alloy theme

Just overwrite classes with app/themes/YOURTHEME/com.caffeinalab.titanium.formbuilder/styles/widget.tss

Contributing

How to get involved:

  1. Star the project!
  2. Answer questions that come through GitHub issues
  3. Report a bug that you find

Pull requests are highly appreciated.

Solve a problem. Features are great, but even better is cleaning-up and fixing issues in the code that you discover.

Copyright and license

Copyright 2015 Caffeina srl under the MIT license.