Backbone Forms: Validate on blur
HTML
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-deep-model/master/distribution/deep-model.js"></script>
<script id="formTemplate" type="text/html">
<form>
<table>
<tbody>
<tr>
<td>Buffer check-in time</td>
<td><div data-fields="cidesc"></div></td>
<td><div data-fields="cimisc"></div></td>
</tr>
<tr>
<td>Buffer check-out time</td>
<td><div data-fields="codesc"></div></td>
<td><div data-fields="comisc"></div></td>
</tr>
<tr>
<td>Buffer check-out time</td>
<td><div data-fields="todesc"></div></td>
<td><div data-fields="tomisc"></div></td>
</tr>
</tbody>
</table>
</form>
</script>
CSS
table {
width: 100%
}
JavaScript
var FormSchema = Backbone.Model.extend({
defaults: function() {
return {
'cidesc': 'abc',
'cimisc': 3555,
'codesc': 'asdf',
'comisc': 123,
'todesc': 'def',
'tomisc': 1233,
};
},
});
var Form = Backbone.Form.extend({
template: _.template($('#formTemplate').html()),
schema: {
'cidesc': { type: 'Text', title: '' },
'cimisc': { type: 'Text', title: '' },
'codesc': { type: 'Text', title: '' },
'comisc': { type: 'Text', title: '' },
'todesc': { type: 'Text', title: '' },
'tomisc': { type: 'Text', title: '' },
}
});
var form = new Form({
model: new FormSchema()
}).render();
$('body').append(form.el);