index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
		<title>Test</title>

		<script src="htmlEncode.js"></script>
		<script src="tv4.js"></script>
		<script src="jsb.js"></script>

		<style>
			@import url("jsb.css");
		</style>
	</head>
	<body>
		<div id="form"></div>
		<button id="save">Save</button>
		<button id="validate">Validate</button>

		<script>
			var schema = {
				"Other": {
					"properties": {
						"name": {
							"type":			[ "string", "array" ],
							"required":		true,

							"items": {
								"type":		"string"
							},

							"minItems":     1,
							"maxItems":     3
						},
						"detail": {
							"type":			"object",

							"properties": {
								"description": {
									"type":			"string",
									"required":		true,
									"large":		true
								},

								"type": {
									"type":			"string",
									"required":		true,
									"enum": [
										"unknown", "free", "paid"
									]
								}
							}
						}
					}
				},

				"Example": {
					"extends":				"Other",

					"properties": {
						"private": {
							"type":			"boolean",
							"description":	"If true the this item will be considered private"
						},
						"other": {
							"type":			"array",
							"items": {
								"$ref":		"Other"
							}
						},
						"age": {
							"type":			"number"
						}
					}
				},
			};

			var data = {
				"name":				[ "foo", "bar" ],
				"private":			true,
				"age":				77,

				"detail": {
					"description":	"An example object",
					"type":			"free"
				}
			};

			var f = document.getElementById('form');
			var jsb = new JSB(f, data);

			jsb.setSchema(schema["Example"], function(name) {
				console.log("Load ref:", name);

				return(schema[name]);
			});

			jsb.render();

			document.getElementById('save').addEventListener('click', function(e) {
				console.log(JSON.stringify(jsb, null, "   "));
			});

			document.getElementById('validate').addEventListener('click', function(e) {
				if (jsb.validate()) {
					alert('Yup, all good');
				} else {
					alert('Sorry, not valid');
				}
			});
		</script>
	</body>
</html>