How do I validate a form being filled out in Backbone?


So I have a new form set up it saves temporarily and all but I want it to only be able to update when it is validated otherwise show some errors. This is during the view section for the saveEdits event Any clue as to what I am doing wrong?

This is my main.js file

(function () {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Templates: {},
        Router: {}


    // MODEL
    App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'first',
            lastName: 'last',
            email: 'Email',
            phone: '222',
            birthday: '07/22/1980'

        validate: function (attrs) {

            if (!attrs.firstName) {
                return 'You must enter a real first name.';
            if (!attrs.lastName) {
                return 'You must enter a real last name.';
            if ( < 5) {
                return 'You must enter a real email.';
            if ( < 10 && === int) {
                return 'You must enter a real phone number, if you did please remove the dash and spaces.';
            if ( < 2) {
                return 'You must enter a real city.';

        initialize: function() {
             this.on('invalid', function (model, invalid) {


    //var userModel = new App.Models.User();

    App.Views.User = Backbone.View.extend({
        el: '#user',
        //model: userModel,
        //tagName: 'div',
        //id: 'user',
        //className: 'userProfile',
        //template: _.template($("#userTemplate").html()),
        //editTemplate: _.template($("#userEditTemplate").html()),

        initialize: function (){


        render: function() {
            this.template = Handlebars.compile($("#userTemplate").html());
            this.editTemplate = Handlebars.compile($("#userEditTemplate").html());

            return this;

        events: {
            'click button.edit': 'editProfile',
            'click': 'saveEdits',
            'click button.cancel': 'cancelEdits'

        editProfile: function () {


        saveEdits: function () {
            var form = $(this.el).find('form#updateUser');

                firstName : form.find('.firstName').val(),
                lastName : form.find('.lastName').val(),
                email: form.find('.email').val(),
                phone: form.find('.phone').val(),
                birthday: form.find('.birthday').val()





        cancelEdits: function() {

    //start history service

    var user = new App.Views.User({model: new App.Models.User()});

It works fine until I insert the this.model.validate and an error shows up stating this: Uncaught TypeError: Cannot read property 'firstName' of undefined

Problem courtesy of: Lion789


You don't call validate explicitly -- it's meant called by the Backbone framework:

By default validate is called before save, but can also be called before set if {validate:true} is passed.

So to fix the code in the OP, use validate: true in the call to set:

    firstName : form.find('.firstName').val(),
    // ...
}, { validate: true });

Note that, if you wanted to call validate, then you have to pass it the attrs parameter, as in this.model.validate(this.model.toJSON());

Solution courtesy of: McGarnagle


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.