Backbone collection on save error

Question

I'm trying to get it so that when my backbone collection is saving if it hits an error I can do something with it. However when the form is saved the Render All Tasks button's click event is always triggered. How can I get it to stop iterating the collection if an error is found? Or otherwise how can I get it to call the fail function?

var EditTaskView = AddTaskView.extend({
    template: _.template($("#individualTaskEditView").html()),
     events: {

            "submit": function (e) {
                e.preventDefault();

                if (this.model.isValid(true) && this.ScheduleView.isValid() && this.ProviderView.isValid()) {
                    $.when(this.model.save(), this.FiltersView.saveAll())
                        .done(function () {
                            $("#RenderAllTasks").trigger("click");
                        })
                    .fail(function (xhr, status, errorMessage) {
                        var message = JSON.parse(xhr.responseText).Message;
                        RenderError(message, "#EditTaskDetailsTabError");
                    });
                }
            }

        }
};

var FieldCollectionAddView = Backbone.View.extend({
    tagName: "div",
    render: function () {
        // iterate the collection
        this.collection.each(function (field) {
            // render the view and append to the collection
            var view = new FieldAddView({ model: field });
            var rendered = view.render();
            this.$el.append(rendered.el);
        }, this);
        return this;
    },
    isValid: function () {
        var valid = true;
        _.each(this.collection.models, function (model) {
            if (!model.isValid(true)) {
                valid = false;
            }
        });
        return valid;
    },
    saveAll: function () {
        var errorsFound = false;
        _.each(this.collection.models, function (model) {
            model.save(null, {
                error: function (error) {
                    //TODO: do soemthing with the error
                    var message = JSON.parse(el.responseText).Message;
                    RenderError(message, "#ProviderDetailsTabError");
                }
            }, { wait: true });
        });
        return errorsFound;
    }
});

var ProviderAddView = Backbone.View.extend({
    tagName: "div",
    template: _.template($("#providerAddTemplate").html()),
    render: function () {
        // append the template to the element
        this.$el.append(this.template);
        //render provider types
        this.ProviderTypes = RenderProviderTypes(this.model.attributes.ProviderTypes);

        var providerTypesDiv = _.template($("#ProviderTypesTemplate").html());

        $("#ProviderTypesDiv", this.$el).html(providerTypesDiv);
        $("#ProviderTypesSelectDiv", this.$el).html(this.ProviderTypes.render().el);
        $("#ProviderTypes", this.$el).val(this.model.attributes.ProviderType);

        // render field collection
        var collection = new FieldCollection(this.model.attributes.ProviderFieldList);
        var fieldsView = new FieldCollectionAddView({
            collection: collection
        });
        this.FieldsAddView = fieldsView;
        // append the fields to the element
        $("#fieldsDiv", this.$el).append(fieldsView.render().el);


        this.stickit();
        return this;
    },
    events: {
        "submit #NewProviderForm": function (e) {
            e.preventDefault();
            if (this.FieldsAddView.isValid()) {
                var fieldsView = this.FieldsAddView;
                this.model.save(null, {}, { wait: true })
                    .success(function (result) {
                        var filters = new FilterCollection();
                        $.when(fieldsView.saveAll(),
                            filters.fetch({
                                data: $.param({
                                    taskId: result.attributes.TaskId
                                })
                            }))
                            .done(function() {
                                if (!$("#FiltersForm").html()) {
                                    var view = new FilterCollectionView({ collection: filters });
                                    assign(view, "#FilterDetails");
                                    $("#FiltersForm").append(buttonsTemplate);

                                    $("#FilterDetailsTab").parent("li").removeClass("disabled");
                                    $("#FilterDetailsTab").attr("data-toggle", "tab");
                                }
                                $("#FilterDetailsTab").tab("show");
                            });
                        })
                        .error(function (xhr, el, other) {
                            var message = JSON.parse(el.responseText).Message;
                            RenderError(message, "#ProviderDetailsTabError");
                        });
                    }
                }
        },
        isValid: function () {
            return this.model.isValid(true) && this.FieldsAddView.isValid();
        },
        save: function () {
            this.model.save();
            this.FieldsAddView.saveAll();
        }

    });

Answer 1

Ok, so I found how this has to be done. In short the code had to be changed so that it was syncing the entire collection at once using Backbone.sync instead of iterating over it and saving each model individually. Also when you're ready to save the collection you use the $.when function so it completes the whole sync before deciding what to do. Below is the relevant code showing the changes that were made.

var FieldCollection = Backbone.Collection.extend({
    url: "/api/Field",
    model: FieldModel,
    syncAll: function () {
        return Backbone.sync("create", this)
            .error(function (xhr, el, other) {
                var message = JSON.parse(xhr.responseText).Message;
                var tab = "";
                var activeTab = $("#Tabs li.active a").attr("id");
                if (activeTab === "TaskListTab") {
                    tab = "#EditTaskDetailsTabError";
                }
                else if (activeTab === "NewTaskTab") {
                    tab = "#ProviderDetailsTabError";
                }
                RenderError(message, tab);
            });
    }
});

var FieldCollectionAddView = Backbone.View.extend({
    saveAll: function () {
        return this.collection.syncAll();
    }
});

var ProviderAddView = Backbone.View.extend({
    events: {
        "submit #NewProviderForm": function (e) {
            e.preventDefault();
            if (this.FieldsAddView.isValid()) {
                var fieldsView = this.FieldsAddView;
                        $.when(fieldsView.saveAll())
                            .done(function() {
                                // success
                            });
                    }

            }

    }
});