Simple Form Builder With JSON Schema - jQuery JSONForm

Just another JSON to Form builder that dynamically generates a Bootstrap-friendly HTML form from JSON data you provide.

Supported input types:

• String
• Password
• Email
• Text
• Currency
• Datetime

How to use it:

1. Download and place the JavaScript file jquery-jsonform.js after jQuery.

<script src="/path/to/jquery.min.js"></script>
<script src="dist/jquery-jsonform.js"></script>

2. Initialize the form builder and we're ready to go.

var formBuilder = new FormBuilder(options);

3. Prepare your form data following the JSON structure as follows:

var myData = {  
    "name": "User",
    "attrs": [
      {
        "id": "username",
        "name": "User Name",
        "type": "string", 
        "value": "user1", 
        "meta": 
        {
          "min": 4,
          "max": 64,
          "unique": "users"
        }
      },
      {
        "id": "email",
        "name": "Email",
        "type": "email",
        "meta": 
        {
          "min": 4,
          "max": 128,
          "unique": "users"
        }
      },
      {
        "id": "password",
        "name": "Password",
        "type": "password",
        "meta": []
      }
    ]
}

4. Create a container element in which you want to place the generated form.

<div id="example"></div>

5. Generate the form using the build method. Possible parameters:

• method: Specify how to send your form data, POST or GET.
• action: Specify where to send your form data.
• formId: Container element.
• modelInfoJSON: JSON data.

// formBuilder.build(formId, modelInfoJSON)
formBuilder.createSection('#myForm', myData);

6. Possible plugin options.

• method: Specify how to send your form data, POST or GET.
• action: Specify where to send your form data.
• buttonLabel: Submit button.

var options = {
    method: 'get',
    action: '#action',
    buttonLabel: 'Add'
};

---

This awesome jQuery plugin is developed by etechfocus. For more Advanced Usages, please check the demo page or visit the official website.