Validate models with Backbone.js

Question

with help of books and tutorials im trying to do my own Todo list app. My problem is that when you add ah todo my model should validate if the input come with some text before rendering. i created the validate methis but it doesnt work and i dont know how to track the error, i'll appreciate if you guys could help me finding my error

Model:

var Task = Backbone.Model.extend({
    validate: function(attrs){
        if(!attrs.title){
            return "The task has no title";
        }
    }
});

var task = new Task;

Collection:

var Tasks = Backbone.Collection.extend({
    model: Task
});


var tasks = new Tasks([
    {
        title: 'my task'
    },
    {
        title: 'my task 1'
    },
    {
        title: 'my task 2'
    },
    {
        title: 'my task 3'
    }
]);

Views:

var TaskView = Backbone.View.extend({
    tagName: "li",

    template: _.template( $('#task').html() ),

    initialize: function(){
        this.model.on("change", this.render, this);
    },

    render: function(){
        var template = this.template( this.model.toJSON() );

        this.$el.html( template );

        return this;
    },

    events: {
        'click .icon-checkbox': 'toggleState'
    },

    toggleState: function(e){
        var $checkbox = $(e.target);

        $checkbox.toggleClass('icon-checkbox-unchecked');

    }
});

var TasksView = Backbone.View.extend({
    el: '#tasks',

    initialize: function(){
        this.render();
        this.collection.on('add', this.addOne, this);
    },

    render: function(){
        this.collection.each(this.addOne, this);

        return this;

    },

    addOne: function(task){
        var taskView = new TaskView({ model: task });
        this.$el.append( taskView.render().el );
    }
});

var AddTask = Backbone.View.extend({
    el: '#todos',

    events:{
        'click #add': 'addTask'
    },

    addTask: function(){
        var taskTitle = $('#inputTask').val();
        $('#inputTask').val("");
        var task = new Task( {title: taskTitle} ); // create the task model
        this.collection.add(task); //add the model to the collection        
    }
});


var tasksView = new TasksView( {collection: tasks} );
var addTask = new AddTask( {collection: tasks} ); 

Edit:

I just realized that the validate methos its on ly called when you set or save info in the model, but actually what i want to do is check when the user submit a todo that if it comes with text or ini order to create and render the model.

Answer 1

You never actually call the validate() method. Have you looked into the Backbone Validation plugin? Works pretty slick.

https://github.com/thedersen/backbone.validation

Answer 2

So i came up with this solution, I am not sure if this is a good practice or not or it the view should to this but what i did is: Once you push on the add task button the addTask methos first check if the input has text or not, if it doesnt have text it just only change the placeholder to: "Todo's can not be empty" and doesnt create a model and render its view. But, if the input has text it creates the model append it to the colelction and render the view!.

Here is the new code for the view, i hope someone could tellme if this is good or if the model should validate this or any other object should to this labor.

Code:

var AddTask = Backbone.View.extend({
    el: '#todos',

    events:{
        'click #add': 'addTask'
    },

    addTask: function(){

        var taskTitle = $('#inputTask').val();
        $('#inputTask').val(""); //clear the input

        if($.trim(taskTitle) === ''){
            this.displayMessage("Todo's can not be empty");
        }else{
            var task = new Task( {title: taskTitle} ); // create the task model
            this.collection.add(task); //add the model to the collection            
        }
    },

    displayMessage: function(msg){
        $('#inputTask').attr("placeholder", msg);
    }
});