Simple Form Builder With JSON Schema - jQuery JSONForm

Simple Form Builder With JSON Schema - jQuery JSONForm
File Size: 6.13 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.