JQuery Library for Linking HTML Forms with JSON | jquery.jsForm

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

This is a library that allows linking between HTML and a JavaScript object as shown 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 populate 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 formatting functionality (such as date/time, money, and byte) using HTML markup
  • Provide form validation function
  • Dealing with groups (arrays) with sub-objects
  • Work with binaries (blobs) within JSON by converting them to the URL of the data
  • It provides auxiliary ways to handle array 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 Bootstrap
  • Additional library for form controls, layout (comes bundled in mini version), and internationalization
  • Unit tested with QUnit
  • jslint clean
  • Thumbnail + Gzipped: 7KB


Optional libraries are used with jquery.jsForm.controls.js to allow various input methods:

  • jQuery Format Plugin 1.2 or higher – used when working with date/number formats
  • Clock picker used to display clock entry with input category = “time
  • The date and time control in flatpickr (class = “date” or class = “DateTime“)
  • Alternative date and time picker for date and time picker (class = “date” or class = “DateTime“)
  • Moment.js allows accurate international date support
  • JQWidgets support

How to make use of it:

1. Include each jQuery library and theĀ jsForm plugin’s script on the web 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 your form information in a JS object as follows:

var jsonData = {
    name: "", // 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. Initialize the plugin and fill the HTML form.

<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>    
  <div class="collection sort" data-field="data.props.groups" data-sort="priority">
    <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>
    <button class="sortUp">up</button> <button class="sortDown">down</button> 

4. Available plugin options.

   * 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) {
        return val.reverse();
    deserialize: function(val, field, obj) {
        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 strategies.

// Deserialize the object based on the form

// Get the data object

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

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

// Clear the form

// Reset the form

// Check if the form has been changed

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

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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *