json-form-schema

Build HTML Forms From JSON Schema With Bootstrap | jsonform

by

The JSON Form Library is a client-side JavaScript library that takes a structured data form defined using the JSON schema as input and returns an easy-to-run Bootstrap 3 HTML form that matches the schema.

The generated HTML form includes client-side verification logic that provides inline feedback directly to the user when the form is submitted (provided JSON schema validator is available). If the values are correct, the JSON sample library uses the presented values to create a JavaScript data structure that matches the data model.

The design of a fully generated HTML form may be adjusted by a simple declarative mechanism.

generate html form from json schema, generate ui from json, convert json to html form, generate angular template form from json object

How to make use of it:

1. Load the mandatory jQuery and underscore.js libraries within the doc.

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

2. Load Bootstrap’s stylesheet to beautify the generated type fields.

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

3. Create an empty type component on the web page.

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

4. Call the function on the shape component and outline the shape fields within the JSON.

$('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: 'Name',
            required: true
          },
          age: {
            type: 'number',
            title: 'Age'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
      });

5. Validate the info on submitting utilizing the onSubmit callback.

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

Build HTML Form From JSON Schema, JSON Form Plugin/Github, json forms, json forms example, json form documentation, form builder with json

See Demo And Download

Demo
Download

Official Website(jsonform): Click Here

This superior jQuery/javascript plugin is developed by jsonform. For extra Advanced Usages, please go to the official website.

Leave a Comment