jQuery JSON form builder – HTML forms from JSON Schema
A plugin, that allows us to build HTML forms from JSON Schema! jQuery JSON form builder in action.
Build HTML forms from JSON Schema with jQuery JSON Form plugin
JSON Form is a JSON based form builder library which dynamically generates form fields from JSON data on the client side.
The library may also validate inputs entered by the user against the data model upon form submission and create the structured data object initialized with the values that were submitted.
The JSON Form builder is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns a Bootstrap 3-friendly HTML form that matches the schema.
The generated HTML form includes client-side validation logic that provides direct inline feedback to the user upon form submission (provided a JSON Schema validator is available). If values are valid, the JSON Form library uses submitted values to create the JavaScript data structure that matches the data model.
Example – a form that asks for the user’s name (required) and age (optional)
<html>
<head>
<meta charset="utf-8" />
<title>Getting started with JSON Form</title>
<link rel="stylesheet" style="text/css" href="bootstrap.css" />
</head>
<body>
<h1>Getting started with JSON Form</h1>
<form></form>
<div id="res" class="alert"></div>
<script type="text/javascript" src="deps/jquery.min.js"></script>
<script type="text/javascript" src="deps/underscore.js"></script>
<script type="text/javascript" src="deps/opt/jsv.js"></script>
<script type="text/javascript" src="lib/jsonform.js"></script>
<script type="text/javascript">
$('form').jsonForm({
schema: {
name: {
type: 'string',
title: 'Name',
required: true
},
age: {
type: 'number',
title: 'Age'
}
},
onSubmit: function (errors, values) {
if (errors) {
$('#res').html('<p>I beg your pardon?</p>');
}
else {
$('#res').html('<p>Hello ' + values.name + '.' +
(values.age ? '<br/>You are ' + values.age + '.' : '') +
'</p>');
}
}
});
</script>
</body>
</html>
License: MIT
Homepage
https://jsonform.github.io/jsonform/playground/index.html
GitHub
https://github.com/jsonform/jsonform
See also
JavaScript format input while typing – Cleave.js
Bootstrap dual listbox solution
jQuery convert JSON to grid plugin – Columns
jQuery drop down menu with images – ddSlick
Responsive mobile menu jQuery plugin
It’s just awesome!
