Skip to content

Instantly share code, notes, and snippets.

@alexbeletsky
Created November 8, 2012 07:38
  • Star 4 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alexbeletsky/4037415 to your computer and use it in GitHub Desktop.
Baby steps to Backbone - step 2 - Validation
var Feedback = Backbone.Model.extend({
url: '/feedback',
defaults: {
'email': '',
'website': '',
'feedback': ''
},
validate: function (attrs) {
var errors = [];
if (!attrs.email) {
errors.push({name: 'email', message: 'Please fill email field.'});
}
if (!attrs.feedback) {
errors.push({name: 'feedback', message: 'Please fill feedback field.'});
}
return errors.length > 0 ? errors : false;
}
});
$(function () {
var model = new Feedback();
var view = new FeedbackFormView ({model: model});
$('#app').html(view.render().el);
});
var FeedbackFormView = Backbone.View.extend({
className: 'row',
template: '\
<form>\
<legend>Share the feedback</legend>\
<div class="control-group email">\
<label>Email</label>\
<input type="text" id="email" placeholder="Your email address...">\
<span class="help-inline"></span>\
</div>\
<div class="control-group website">\
<label>Web site</label>\
<input type="text" id="website" placeholder="Your website...">\
<span class="help-inline"></span>\
</div>\
<div class="control-group feedback">\
<label>Feedback</label>\
<textarea id="feedback" class="input-xxlarge" placeholder="Feedback text..." rows="6"></textarea>\
<span class="help-inline"></span>\
</div>\
<button type="submit" id="submit" class="btn">Submit</button>\
</form>\
',
events: {
'click #submit': 'submitClicked'
},
render: function () {
this.$el.html(this.template);
return this;
},
submitClicked: function (e) {
e.preventDefault();
var me = this;
var options = {
success: function () {
me.hideErrors();
},
error: function (model, errors) {
me.showErrors(errors);
}
};
var feedback = {
email: this.$('#email').val(),
website: this.$('#website').val(),
feedback: this.$('#feedback').val()
};
this.model.save(feedback, options);
},
showErrors: function(errors) {
_.each(errors, function (error) {
var controlGroup = this.$('.' + error.name);
controlGroup.addClass('error');
controlGroup.find('.help-inline').text(error.message);
}, this);
},
hideErrors: function () {
this.$('.control-group').removeClass('error');
this.$('.help-inline').text('');
}
});
@phillipconrad
Copy link

This example doesn't work with the current backbone version 1.1.2.
The _validate-method triggers the event 'invalid' instead of calling 'options.error'.

    // Run validation against the next complete set of model attributes,
    // returning `true` if all is well. Otherwise, fire an `"invalid"` event.
    _validate: function(attrs, options) {
      if (!options.validate || !this.validate) return true;
      attrs = _.extend({}, this.attributes, attrs);
      var error = this.validationError = this.validate(attrs, options) || null;
      if (!error) return true;
      this.trigger('invalid', this, error, _.extend(options, {validationError: error}));
      return false;
    }

@Saneesh
Copy link

Saneesh commented Jul 8, 2014

So how can we make it work?

@bugbuilder
Copy link

Use

Backbone.listenTo(model,'invalid',function(model,error,options){
       console.log(model,error,options);
   });

Copy link

ghost commented Nov 13, 2014

Where I need to put this code listenTo in the feedback app, I'm new to this technology, this one is not working with the current backbone version, can you please tell me where to put this new code I mean in which file? Thank you so much...

@cheshireoctopus
Copy link

@shravanaz86 - a bit late to the party, but believe you could do the following:

this.model.on('invalid', function (model, error) {
     console.log(error);
}

this.model.save();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment