jQuery JSON form builder – HTML forms from JSON Schema

DirectCode | November 28, 2019 | Awesome, Forms, JavaScript, jQuery, Libraries, Tools, UI | No Comments

A plugin, that allows us to build HTML forms from JSON Schema! jQuery JSON form builder in action.

Build HTML forms from JSON Schema with jQuery JSON Form plugin

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.

The JSON Form builder is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns a Bootstrap 3-friendly HTML form that matches the schema.

The generated HTML form includes client-side validation logic that provides direct inline feedback to the user upon form submission (provided a JSON Schema validator is available). If values are valid, the JSON Form library uses submitted values to create the JavaScript data structure that matches the data model.

Example – a form that asks for the user’s name (required) and age (optional)

<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started with JSON Form</title>
    <link rel="stylesheet" style="text/css" href="bootstrap.css" />
  </head>
  <body>
    <h1>Getting started with JSON Form</h1>
    <form></form>
    <div id="res" class="alert"></div>
    <script type="text/javascript" src="deps/jquery.min.js"></script>
    <script type="text/javascript" src="deps/underscore.js"></script>
    <script type="text/javascript" src="deps/opt/jsv.js"></script>
    <script type="text/javascript" src="lib/jsonform.js"></script>
    <script type="text/javascript">
      $('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>');
          }
        }
      });
    </script>
  </body>
</html>

License: MIT

Homepage

https://jsonform.github.io/jsonform/playground/index.html

GitHub

https://github.com/jsonform/jsonform