Include the JS files
<!-- Dependencies --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script> <script type="text/javascript" src="src/js/dependencies/json2.js"></script> <!-- jform: Core --> <script type="text/javascript" src="src/js/core.js"></script> <!-- jform question type: varchar (simple text input) --> <script type="text/javascript" src="src/js/modules/varchar.js"></script> <!-- jform question type: checkbox --> <script type="text/javascript" src="src/js/modules/checkbox.js"></script> <!-- jform question type: radio --> <script type="text/javascript" src="src/js/modules/radio.js"></script> <!-- jform plugin: bootstrap (display form error using the bootstrap theme) --> <script type="text/javascript" src="src/js/modules/bootstrap.js"></script> <!-- Include Bootstrap 3.0 --> <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"> <link rel="stylesheet" href="http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Create a container and a submit button
<div id="form"></div> <div id="submit" class="btn btn-primary">Submit form</div>
Define your form, it's a simple array.
<script type="text/javascript">
var form = [{
name: "question_1",
type: "radio",
label: "This is a radio question",
required: true,
list: [{
value: "A",
label: "Choice A"
},{
value: "B",
label: "Choice B"
},{
value: "C",
label: "Choice C"
}]
},{
name: "question_2",
type: "varchar",
label: "This is a varchar question",
required: true
},{
name: "question_3",
type: "checkbox",
label: "This is a checkbox question",
required: true,
list: [{
value: "A",
label: "Choice A"
},{
value: "B",
label: "Choice B"
},{
value: "C",
label: "Choice C"
}]
}];
</script>
Render the form
<script type="text/javascript">
$(function() { // We make sure jQuery is loaded before we generate the form.
var jform = new window.jform().build($("#form"), { // We are generating the form in the #form container
form: form, // The form data
submit: $("#submit"), // The submit button
onSubmit: function(data, jform) { // Executed when the entire form validates.
console.log("Form data:",data);
// We use the Bootstrap plugin, telling it to reset the previous error display
jform.bootstrap.resetErrors();
},
onError: function(data, jform) { // Executed when at least one question didn't validate.
console.log("Error:",data);
// We use the Bootstrap plugin, telling it to visually show us the errors using the bootstrap theme.
jform.bootstrap.showErrors();
// You can manage your own error display. "data" is an array containing the list of fields that did not validate.
// We won't do that int hat example.
alert("You have errors on the form.");
}
});
});
</script>