jQuery Library To Connect HTML Forms With JSON | jquery.jsForm

jquery.jsForm is a jQuery-based form library that allows you to manipulate data inside a JavaScript object (such as from a JSON request) using regular HTML forms.

json schema to html form generator is a library that allows linking between HTML and a JavaScript object as described in MVVM similar to other libraries like knockout.js or AngularJs. JsForm only takes care of presenting the data in HTML. The console can be written in standard jQuery. This keeps the library clean and simple.

The main features of this library are:

  • Use HTML markup to dynamically fill your forms/page with almost any js object
  • Update an existing js object with the changes made within the model (= data manipulation without additional code)
  • Provide basic functions of the format (such as date/time, money, and byte) using HTML markup
  • Provide form validation function
  • Dealing with collections (arrays) with sub-objects
  • Handling binaries (blobs) within JSON by converting them to a data URL
  • Provides auxiliary methods to handle matrix manipulation (add new entry/remove entry) using only HTML markup
  • Can be used with the autocomplete function to add new array objects
  • Compatible with bootstrap, jQuery UI, jQuery Mobile, and other frameworks by working directly on the DOM
  • Additional library of form and layout controls (comes bundled in mini version), internationalization
  • Unit tested with QUnit
  • clean jslint
  • Minified + Gzipped: 7KB

Optional

The optional libraries are used with jquery.jsForm.controls.js to allow different input methods:

  • jQuery Format Plugin 1.2 or higher – used when working with date/number formats
  • Clock picker used to display clock input with input class=”time”
  • datetime control in flatpickr(class=”date” or class=”dateTime”)
  • Alternate date and time picker for date and time picker (class = “date” or class = “dateTime”)
  • Moment.js allows more accurate international date support (discontinued) -> use luxon

How to make use of it:

1. Include the jQuery library and jsForm script on the page.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/src/jquery.jsForm.js"></script>
<!-- OPTIONAL. UI Controls and Field validation -->
<script src="/path/to/src/jquery.jsForm.controls.js"></script>

2. Define the form data in the JS object as follows:

var jsonData = {
    name: "jQuery Script", // standard inputs
    props: {
      active: true, // checkbox
      groups: [{
        name: "Base",
        priority: 0,
        tasks: [{ id:0, name: "base task1", priority: 1}, {id:1,name: "base task0", priority: 0}, {id:2,name: "base task2", priority: 2}]
      },
      {
        name: "Important",
        priority: 2,
        tasks: [{id:0, name: "imp task1", priority: 1}, {id:1,name: "imp task0", priority: 0}]
      },
      {
        name: "Other",
        priority: 1,
        tasks: [{id:0, name: "other", priority: 1}]
      }]
    },
    state: "VISIBLE"  // selects (enums)
};

3. Configure the plugin and fill in the HTML form with the data you just specified.

<div id="details">
  Name: <input name="data.name"/><br/>
  <input type="checkbox" name="data.props.active"/> active<br/>
  <select name="data.state">
    <option value="VISIBLE">visible</option>
    <option value="IMPORTANT">important</option>
    <option value="HIDDEN">hidden</option>    
  </select>
  <div class="collection sort" data-field="data.props.groups" data-sort="priority">
  <fieldset>
    <legend>Group: <span class="field">groups.name</span></legend>
    <ul class="collection sort reorder" data-field="groups.tasks" data-sort="priority">
      <li><input name="tasks.name"/></li>
    </ul>
    <button class="sortUp">up</button> <button class="sortDown">down</button> 
  </fieldset>
  </div>
</div>

4. Plugin options available.

$("#details").jsForm({
  /**
   * enable form control rendering (if jsForm.controls is available) and validation
   */
  controls: true,
  /**
   * the object used to fill/collect data
   */
  data: null,
  /**
   * the prefix used to annotate the input fields
   */
  prefix: "data",
  /**
   * set to null to discourage the tracking of "changed" fields. 
   * Disabling this will increase performance, but disabled the "changed" functionality.
   * This will add the given css class to changed fields.
   */
  trackChanges: "changed",
  /**
   * set to false to only validate visible fields. 
   * This is discouraged especially when you have tabs or similar elements in your form.
   */
  validateHidden: true,
  /**
   * skip empty values when getting an object
   */
  skipEmpty: false,
  /**
   * an object with callback functions that act as renderer for data fields (class=object).
   * ie. { infoRender: function(data){return data.id + ": " + data.name} } 
   */
  renderer: null,
  /**
   * an object with callback functions that act as pre-processors for data fields (class=object).
   * ie. { idFilter: function(data){return data.id} } 
   */
  processors: null,
  /**
   * dataHandler will be called for each field filled. 
   */
  dataHandler: null, /*{
    serialize: function(val, field, obj) {
      if(field.hasClass("reverse"))
        return val.reverse();
    },
    deserialize: function(val, field, obj) {
      if(field.hasClass("reverse"))
        return val.reverse();
    }
  }*/
  /**
   * optional array of elements that should be connected with the form. This
   * allows the splitting of the form into different parts of the dom.
   */
  connect: null,
  /**
   * The class used when calling preventEditing. This will replace all
   * inputs with a span with the given field
   */
  viewClass: "jsfValue"
});

5. API methods.

// Deserialize the object based on the form
$("#details").jsForm("get");

// Get the data object
$("#details").jsForm("getData");

// Prevent editing
$("#details").jsForm("preventEditing", [true|false]);

// Fill the form
$("#details").jsForm("fill", data);

// Clear the form
$("#details").jsForm("clear");

// Reset the form
$("#details").jsForm("reset");

// Check if the form has been changed
$("#details").jsForm("changed");

// Compare data
$("#details").jsForm("equals", data[, "idField"]);

Form Generator With JSON Schema, jquery.jsForm Plugin/Github, react jsonschema form


See Demo And Download

Official Website(corinis): Click Here

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

Share