バックボーンでいくつかの単純な入力フィールドを検証しようとしています:
var User = Backbone.Model.extend({
validate: function(attr, options){
if(attr.age < 18){
return 'too young';
}
if(attr.firstname === ''){
return 'name required';
}
},
urlRoot: '/users'
});
ビューでは、{validate:true} を渡しています。ユーザーでは無効です。モデルから継承された検証関数からのエラーを console.log に記録します。
var EditUser = Backbone.View.extend({
el:'.page',
render: function(options){
var that = this;
if(options.id){
that.user = new User({id: options.id});
that.user.fetch({
success: function(user){
var template = _.template($('#edit-user-template').html(), {user:user});
that.$el.html(template);
}
});
} else{
var template = _.template($('#edit-user-template').html(), {user:null});
this.$el.html(template);
}
},
events: {
'submit .edit-user-form': 'saveUser',
'click .delete': 'deleteUser'
},
saveUser: function (ev){
var userDeatils = $(ev.currentTarget).serializeObject();
var user = new User({validate:true});
user.on("invalid", function(model, error) {
console.log(error);
});
user.save(userDeatils,{
success: function(user){
router.navigate('', {trigger:true});
}
})
return false;
},
deleteUser: function(ev){
this.user.destroy({
success: function(){
router.navigate('', {trigger:true});
}
});
return false;
}
});
console.log に表示されるのは、最初のエラー「too young」だけですが、2 番目の「name required」ではありません。単一のエラーが返されて、各相対入力の横にフェードインになるようにスパン タグを設定したいと思います。