Backbonejs - validation plungin not calling the function properly

Question

I am doing a Backbone test app. I decide to validate it. I am using one of the famous validate thedersen's backbone.validation but it's not working properly. here is my source any one help me to figure-out the issue?

jQuery(document).ready(function($) {

    _.extend(Backbone.Validation.callbacks, { //is this wrong place?
        valid: function (view, attr, selector) {
            console.log("valide"); //i am not getting any console
        },
        invalid: function (view, attr, error, selector) {
           console.log('not valide'); //i am not getting any console
        }
    });



    var Person = Backbone.Model.extend({
        defualts : {
                    first_name : 'qwe',
                    last_name : 'ewq',
                    id : 0
        },
        validation: {
            first_name: {
              required: true,
              msg: 'Please enter a valid first_name'
            },
            last_name: {
              required: true,
              msg: 'Please enter a valid last_name'
            }
        }

    });

    var PersonCollection = Backbone.Collection.extend({
            model : Person
        });

    var idGen = 1;

    var PersonView = Backbone.View.extend({
        el : $("#personDisplay"),
        tmpl : _.template($("#personTemplate").html()),
        editTmpl : _.template($("#editPersonTemplate").html()),
        initialize:function(){

        },
        render : function() {
            if (this.model.id != 0) {
                    $(this.el).append(this.tmpl(this.model.toJSON()));
            } else {
                    $(this.el).append(this.editTmpl(null));


               }

//when below uncommitted it works, but i am getting 3 consoles.

                // var isValid = this.model.isValid('first_name');  
                // console.log('isValid', isValid);
        }
    });         

     var PersonMasterView = Backbone.View.extend({

            el : $("#displayForm"),
            editTmpl : _.template($("#editPersonTemplate").html()),

            events : {
                    "click #addUser" : "addUsr",
                    "click #save" : "add"
            },

            initialize : function() {

                    this.collection = new PersonCollection();
                    this.render();
                    Backbone.Validation.bind(this);
            },

            render : function() {
                    //
                    $("#personDisplay").html('');

                    _.each(this.collection.models, function(item) {
                            //alert('collection iteratin->'+item.id);
                            var perView = new PersonView({
                                    model : item
                            });
                            perView.render();
                    }, this);

            },

            add : function(e) {
                    e.preventDefault();
                    idGen = idGen + 1;
                    var data = (Backbone.Syphon.serialize(this));
                    var that = this;
                    data.id = idGen;
                    // console.log(data);
                    this.collection.add(data);
                    this.render();
            },

            addUsr : function() {
                    var prsn = new Person({
                            id : 0
                    });
                    this.collection.add(prsn);
                    this.render();
            }
    });

    var pView = new PersonMasterView();
    Backbone.Validation.bind(pView);

});

Answer 1

I updated the code like this: works fine. thanks to all

var PersonView = Backbone.View.extend({
        el : $("#personDisplay"),
        tmpl : _.template($("#personTemplate").html()),
        editTmpl : _.template($("#editPersonTemplate").html()),
        initialize:function(){
            Backbone.Validation.bind(this);
        },
        render : function() {

            var status = this.model.isValid(true);

            if (this.model.id != 0) {
                    $(this.el).append(this.tmpl(this.model.toJSON()));
            } else {
                    $(this.el).append(this.editTmpl(null));
            }
        }
    });