var UserForm = Backbone.Model.extend({
validation: {
name: {
required: true,
rangeLength: [1, 20]
},
email: {
required: true,
rangeLength: [1, 50],
pattern: 'email'
},
age: {
required: true,
range: [0, 200]
}
}
});
var UserFormView = Backbone.View.extend({
bindings: {
'#name': 'name',
'#email': 'email',
'#age': 'age'
},
events: {
'click [name="confirm"]': 'create'
},
initialize: function () {
Backbone.Validation.bind(this);
},
render: function () {
this.stickit();
return this;
},
create: function () {
if(this.model.isValid(true)) {
// this.model.save();
alert('Great Success!');
} else {
alert(JSON.stringify(this.model.validate()));
}
return false;
}
});
var userForm = new UserForm();
var userFormView = new UserFormView({
model: userForm,
el: $('#userForm')
});
userFormView.render();
<form id="userForm" method="post" action="#create">
<label for="name">Name:</label>
<input name="name" id="name" />
<br>
<label for="email">Email:</label>
<input name="email" id="email" />
<br>
<label for="age">Age:</label>
<input name="age" id="age" />
<br>
<button name="confirm">Confirm</button>
</form>
External resources loaded into this fiddle: