alpacajs

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.cloudcms.com/alpaca/1.5.2/bootstrap/alpaca.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.cloudcms.com/alpaca/1.5.2/bootstrap/alpaca.min.js"></script>
<scip

JavaScript

$("#field1").alpaca({
    "schema": {
        "type": "object",
        "properties": {
            "name": {
                "type": "string"
            },
            "job": {
                "type": "string"
            }
        }
    },
    "options": {
        "fields": {
            "name": {
                "label": "Name"
            },
            "job": {
                "label": "Job"
            }
        }
    },
    "data": {
        "name": "John McClane",
        "job": "Police Officer"
    },
    "postRender": function(control) {
        var nameField = control.childrenByPropertyId["name"];
        var jobField = control.childrenByPropertyId["job"];
        console.log("Welcome aboard, " + jobField.getValue() + " " + nameField.getValue());
    }
});