Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (87 sloc) 3.66 KB

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.