how to create a html form using a JSON definition?

Question

I am looking for a javascript lib which enables me to store (html) forms in JSON format, with a bit of intelligence built into validate inputs client side. Something like:

function FormController(){
  this.user = {
    name: 'John Smith',
    address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
    contacts:[{type:'phone', value:'1(234) 555-1212'}]
  };
  this.state = /^\w\w$/;
  this.zip = /^\d\d\d\d\d$/;
}

(This is taken from http://docs.angularjs.org/#!cookbook.form ). It's almost what I want, as it offers basic client side validation with regular expressions and you can provide defaults but it appears to still need you to create the HTML form.

I want something that only requires the definition. Any ideas?

Answer 1

I would suggest using JSON Form.

It takes a JSON Schema and can instantly make a form for it, and additionally give you options to customize the form further. E.g.:

$('#myform').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});

…would generate a form with two inputs in #myform element. (jQuery is optional.)

Using the standardized format JSON Schema gives other great advantages and more tools to work with the data definition.

Answer 2

I would agree with Jeremy S Angular Schema Form is outstanding. It follows the same pattern as JSON Form and I have started using it in production and it is working very well.

It is also extensible and I quite quickly wrote a tool to read hyper-schema definition and pull in select field options from an external source and watch other related fields for their data before doing so. It took only a day to build that, suffice to say it is really easy to extend and as it also takes advantage of Angular I would class it as the best choice.

If you are not using Angular then JSON Form would be my preferred option since I see its schema and form pattern emerging as a bit of a standard with these two projects using it. Also given my experience working in enterprise service management it makes sense as nearly all tools for service management have a data model and then a form design administration component for extending the model.

Disclaimer: I was not maintaining Angular Schema Form when I wrote this.

I only became the maintainer on the project a year later because I already loved it.

Answer 3

Definitely check out Alpaca: http://www.alpacajs.org

It renders HTML forms from JSON Schema using Bootstrap, jQueryUI, jQuery Mobile or straight web controls. It has a large library of controls and all sorts of nifty features.

We use it at Cloud CMS (http://www.cloudcms.com) to render some really intuitive UIs.

Alpaca itself is Apache 2.0 licensed and on GitHub (https://github.com/gitana/alpaca).

The coming 1.5.0 release introduces pure Handlebars support and custom gulp builds. Pretty cool stuff.

Answer 4

I've used Jeremy Dorn's JSON Editor for various applications and have always been satisfied with it! It uses JSON Schema, and adds some options for the form generation (as you could conceivably have a variety of inputs for a given type of data structure)

https://github.com/jdorn/json-editor