Skip to content
The jsonForms library is a small JavaScript client-side library that takes a set of options and a structured JSON data model as input and returns a Bootstrap-friendly HTML form that matches the schema.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Adding glyphicons Dec 15, 2014
include removing index.php Dec 15, 2014
LICENSE Initial commit Dec 12, 2014
README.md Reorganize Dec 15, 2014
jsonForms.js Add URL glyphicon Dec 15, 2014

README.md

jsonForms

The jsonForms library is a small JavaScript client-side library that takes a set of options and a structured JSON data model as input and returns a Bootstrap-friendly HTML form that matches the schema.

The generated form includes client-side validation logic using jQuery Validate that provides instant feedback to the user upon submission. If all the field values are valid, then the form is submitted and a customizable callback is issued.

Getting started

The example below creates a form that asks for the user's name and age. The user's name is a required field, while the age is optional.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jsonForms Simple Example</title>
	
	<link href="bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	<div class="row">
		<div class="col-md-3">&nbsp;</div>
		<div class="col-md-6">
			<div id="formSpace"><small>Loading...</small></div><br />
		</div>
		<div class="col-md-3">&nbsp;</div>
	</div>
    <script src="jquery.min.js"></script>
	<script src="jquery.validate.min.js"></script>
	<script src="jsonForms.js"></script>
	<script type="text/javascript">
		var schema = [
			{
				"name": "email",
				"label": "Email",
				"type": "email",
				"required": "Y"
			},
			{
				"name": "password",
				"label": "Password",
				"type": "password",
				"required": "Y"
			},
			{
				"name": "submit",
				"type": "submit",
				"value": "Login"
			}
		];
		$('#formSpace').html(jsonForms.BuildForm(null, schema));
	</script>
  </body>
</html>

See the example in action here

Loading this page in a browser renders a form with two input fields and a submit button. Both of the fields implement the required option meaning that if nothing is entered, an error message will be displayed.

Documentation

You can do much more with the jsonForms library. You may define a more complex data model that fieldsets, checkboxes, dropdown menus, etc. For more information, check the documentation for jsonForms.

Sandbox

If you're more of a do'er type than a reader, the jsonForms Sandbox is a simple jsonForms powered editor that lets you try out and extend all the examples in the doc.

Dependencies

The jsonForms library requires:

The jsonForms library may require further libraries, depending on the features you need for the forms you need to render. In particular:

  • Bootstrap CSS v3.3.1 or above is more or less needed. You can get away without it but all of the jsonForms forms are rendered with Bootstrap in mind.

alt tag

All of these libraries are in the repository, although you might want to check their respective Web site for more recent versions.

Note: jsonForms uses JSON.parse and JSON.stringify which are normally supported by modern browsers. If you need to support other browsers, consider adding a JSON library.

License

The jsonForms library is licensed under the MIT license.

All the libraries that jsonForms depends on are also licensed under the MIT license.

You can’t perform that action at this time.