Model doesn't change when modify view elements in backbone.js

Question

I am validating model's attribute (Name), in order to make sure, customer have to input their name in the register form.

View :

define(["jquery" ,
 "underscore" ,
 "backbone" ,
 "text!templates/CustomerTemplate.html",
 "models/Customer"
],function($ , _ , Backbone, CustomerTemplate, CustomerModel){
 var CustomerView = Backbone.View.extend({
    initialize : function(){
        this.listenTo(this.model, 'change', this.render);
    },
    events : {
        'submit #customerForm' : 'Customer'
    },
    Customer : function(e){
        e.preventDefault()
        var _customer = new CustomerModel({
            UID: "00000000-0000-0000-0000-000000000000",
            Sex: 0,
            Name: $("#name").val(),
        });
        this.model.save(_customer,{validate: true},{
                wait:true,
                success:function(model, response) {
                    console.log('Successfully saved!');
                },
                error: function(model, error) {
                    console.log(model.toJSON());
                    console.log('error.responseText');
                }
        });
    },
    render : function(){
        var customertemplate = _.template(CustomerTemplate);
        this.$el.html(customertemplate(this.model.toJSON()));
        return this;
    }
 });
 return CustomerView;
});

Model:

define(["underscore" , "backbone"],function(_ , Backbone){
 var CustomerModel = Backbone.Model.extend({
    urlRoot: "myurl",
    initialize : function(){
        this.bind('invalid', function(model, error) {
            console.log(error);
        });
    },
    validate: function (attrs){
        if ( !attrs.Name) {
            return 'You must provide a name';
        }
    },
    defaults : {
        UID: "00000000-0000-0000-0000-000000000000",
        Sex: 0,
        Name: "",
    }
 });
 return CustomerModel;
});

Problem : Even the attribute Name is not null , the error message in validate method still appears ( You must provide a name ).

Any idea what could be causing this is appreciate. Thanks.

Answer 1

When you call this.model.save in your CustomerView, you're passing it a new Customer model you instantiated in the previous statement. This isn't quite what you want; you either want to call _customer.save() to save the brand new model, or - more likely - you want to pass your new attributes to the existing model, and save that:

var newAttrs = {
        UID: "00000000-0000-0000-0000-000000000000",
        Sex: 0,
        Name: $("#name").val(),
    };
this.model.save(newAttrs); 

---

When you call this.model.save(_customer, {validate: true}) in your existing code, that Customer model get passed to your validate() function. And that model doesn't have a Name attribute. It does have a Name property - you can access it via _customer.get('Name') - but you should follow the Backbone convention and presume that your validate method is getting a 'simple' JavaScript object, not a Backbone model.