I would like to create an HTML form based on XML or JSON data using Jquery and I also plan to validate any form fields that may be empty or incorrect.
I would like to know if there are any other programs/functions that generate such a form dynamically on the fly and the best way to go about implementing this. Any jquery widgets or libraries that work best with workings examples would be much appreciated
And also what feed to best use in this scenario XML or JSON and explain why?
Thanks
I've found some of these that might help you:
Generating forms from JSON schema:
Generating forms from an XML schema:
Samples from different libraries to generate form:
Just to give you another choice, a library I created:
https://github.com/brutusin/json-forms
JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided
var bf = brutusin["json-forms"].create({
"$schema": "http://json-schema.org/draft-03/schema#",
"type": "object",
"properties": {
"s1": {
"type": "string",
"title": "A string",
"description": "A string input"
},
"num1": {
"type": "integer",
"title": "A number",
"minimum": 1,
"maximum": 10,
"multipleOf": 3,
"description": "An integer multiple of `3`, between `1` and `10` (inclusive)"
},
"array1": {
"type": "array",
"title": "An array values",
"items": {
"type": "object",
"properties": {
"value": {
"type": "string",
"title": "Value"
}
}
}
}
}
});
var container = document.getElementById('container');
bf.render(container);<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script>
<div id="container"></div>
<hr>
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button> <button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>More live examples at http://brutusin.org/json-forms
