Validate on save and save().complete - in backbone - backbone.js

Question

I have problem with validation in my model. It seems that it is impossible to use save().complete(function() {..... in the same time as validation- here is the code:
my model:
App.Models.Task = Backbone.Model.extend({
defaults: {
title:'',
completed: 0
},
validate: function (attrs, options) {
if(attrs.title == '' || attrs.title === undefined) {
return "fill title pls"
}
},
urlRoot: 'tasks'
});
and then in my view i try to save it in add method :
App.Views.TaskAdd = Backbone.View.extend({
tagName: 'div',
template: template('taskTemplateAdd'),
events : {
'click .addTask' : 'add'
},
initialize: function () {
this.model.on('add',this.render, this)
},
add : function () {
var title = $("#addNew input:eq(0)").val();
var completed = $("#addNew input:eq(1)").val();
this.model.set('title', title);
this.model.set('completed', completed);
this.model.save({},
{
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
}).complete(function () {
$("<div>Data sent</div>").dialog();
$('#list').empty();
});
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this
}
});
when validate fires i get error :
Uncaught TypeError: Object false has no method 'complete'
I understand that it tries probably to run complete callback on the return value but how to solve this problem ???

Answer 1

Model.save is documented returning the jqHXR object if successful or false if not.
So, unless your server never fails, you need to handle the case where save returns false. Here's a simple example of the logic you would need:
var valid=this.model.save();
if(!valid) {
// do something when not valid
else {
valid.complete(function() {}); // this is a jqHXR when valid
}
And, as of jQuery 1.8, the use of complete is deprecated. You should consider using always instead.

Answer 2

Use.
...
add : function () {
var self = this;
this.model.save({'title':$("#addNew input:eq(0)").val(),'completed':$("#addNew input:eq(1)").val()},
{
success: function (model, response) {
console.log("success");
self.complete();
},
error: function (model, response) {
console.log("error");
self.complete();
}
});
},
complete: function () {
$("<div>Data sent</div>").dialog();
$('#list').empty();
},
...

Answer 3

model.save() performs a validation first (validate method on the model). If it successfull, it then does the POST/PUT to the server. In other words, you get a false if the client side validation fails. It won't post to server then. You can't use the deferred object if this fails because false.always() will probally result in an error.
Alsoo, if you don't pass a wait: true in the model.save options, it will update the model with its validated object. I usually pass wait: true just to be sure. (I don't want to render the element twice).
If the model fails the client side validation, then it should also fail the server side validation. In this case there is an "invalid" event to listen to. So you only should be interested in the success call. Which in theory should only be interesting if it really has updates (would fire a "change" event)
add: {
var self = this;
this.model.on('invalid', function(error){
console.log(error, 'model is invalid. Check model.validate')
});
this.model.on('change', function(model){
console.log(model.toJSON(), 'model has successfully changed')
});
this.model.on('error', function(error){
console.log("server failed to acknowledge (server connection not made)")
});
this.model.on('sync', function(resp){
console.log("server successfull acknowledged (server connection made)")
});
this.model.save(
{
title:$("#addNew input:eq(0)").val(),
completed:$("#addNew input:eq(1)").val()
},
{
wait: true,
success: function (model, response) {
console.log("success");
#fires an change event if the model is updated
self.complete();
},
error: function (model, response) {
console.log("error");
self.complete();
}
}
);
},
complete: function(){
console.log("show this")
}