Build HTML Form From JSON Schema - jQuery JSON Form

Build HTML Form From JSON Schema - jQuery JSON Form
File Size: 785 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

JSON Form is a JSON based form builder library which dynamically generates form fields from JSON data on the client side.

The library may also validate inputs entered by the user against the data model upon form submission and create the structured data object initialized with the values that were submitted.

Basic usage:

1. Load the necessary jQuery and underscore.js libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/underscore.min.js"></script>

2. Load the Bootstrap's stylesheet to beautify the generated form fields.

<link rel="stylesheet"href="/path/to/bootstrap.css">

3. Load other optional resources as per your needs:

4. Create an empty form element on the page.

<form class="form"></form>

5. Call the function on the form element and define the form fields in the JSON.

$('form').jsonForm({
  "schema": {
    "name": {
      "title": "Name",
      "description": "Nickname allowed",
      "type": "string"
    },
    "gender": {
      "title": "Gender",
      "description": "Your gender",
      "type": "string",
      "enum": [
        "male",
        "female",
        "alien"
      ]
    }
  }
});

6. Validate the data on submit using the onSubmit callback.

$('form').jsonForm({
  onSubmit: function (errors, values) {
    if (errors) {
      // do something
    }
    else {
      // do something
    }
  }
});

Changelog:

2018-09-17

  • Fixed number fields rendering text inputs.

2018-09-06

  • Limit legend updating to direct children

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