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>
CSS
/* Date */
.bbf-date .bbf-date {
width: 4em
}
.bbf-date .bbf-month {
width: 9em;
}
.bbf-date .bbf-year {
width: 5em;
}
/* DateTime */
.bbf-datetime select {
width: 4em;
}
/* List */
.bbf-list .bbf-add {
margin-top: -10px
}
.bbf-list li {
margin-bottom: 5px
}
.bbf-list .bbf-del {
margin-left: 4px
}
/* List.Modal */
.bbf-list-modal {
cursor: pointer;
border: 1px solid #ccc;
width: 208px;
border-radius: 3px;
padding: 4px;
color: #555;
}
JavaScript
var UserForm = Backbone.Form.extend({
template: _.template($('#formTemplate').html()),
schema: {
title: { type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
name: 'Text',
email: { validators: ['required', 'email'] },
password: 'Password'
}
});
var form = new UserForm({
model: new User()
}).render();
$('body').append(form.el);