MobileForms

Introduction

MobileForms allows creating forms dynamically by using a form definition in JSON format. All generated forms has definable fields with all its attributes and validation rules embeded in the same definition file and supports receiving callbacks in native code for different event types as focus, change or submitting form generating a JSON response with the model defined in the form.

MobileForms provides a native wrapper to generate form via a unique definition in JSON for iOS, Android and Windows Phone plataforms, having a native appearance each. The style/appearance on each platform can be defined with stylesheets (CSS) own, allowing you to change the appearance of certain elements (or form completly) in a specific platform or unifying all platforms with the same style.

JSON Form

Input json (form definition)

[
  [
    {
      "header":"Contact"
    },
    {
      "label":"Name",
      "type":"text",
      "name":"name"
    },
    {
      "label":"Lastname",
      "type":"text",
      "name":"lastname"
    },
    {
      "label":"Gender",
      "type":"select",
      "name":"gender",
      "filter":"Male|Female"
    },
    {
      "label":"Email",
      "type":"email",
      "name":"email",
      "filter":"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$",
      "error":"Invalid email address",
      "description":"This field will be validated"
    }
  ],
  [
    {
      "submit":"Save contact"
    }
  ]
]

Preview (iOS / Android / WP) TODO: Include picture here

Output JSON on submit / JSON to populate form

{
  "name" : "John",
  "lastname" : "Mock",
  "email" : "[email protected]",
  "gender" : "male"
}

Fields

* Native picker with Android >= 4.4, in previous, replaced by combos (DD-MM-YYYY / HH:MM) ** Native picket unsupported in WP, replaced by combos (DD-MM-YYYY / HH:MM) *** Android >= 4.4 full support. Previous versions, replaced by number field

Fields (advanced/custom)

Attributes

JavaScript implementation

Usage

    <script src="mobileforms.libraries.js"></script>
    <script src="mobileforms.utils.js"></script>
    <script src="mobileforms.populator.js"></script>
    <script src="mobileforms.builder.js"></script>
    <script src="mobileforms.js"></script>
    <script>
        var params = {
            jsonForm : form1,
            ...
        };
        var mobileform = new MobileForms(params);
    </script>

Params

Functions