Backbone bootstrap model validations
Scenario
We have fields that needs to be validated. We already highlight the erroneous field(s) and display a specific message below each erroneous field. Now we want to display a popup notification on the top of page.
Solution #1 - Invite to look below for actual error(s)
var isValid = this.model.save(settings, { wait: true, success: function(model) { callback(model); var url = "/streams/" + model.get('id'); app.router.navigate(url, {trigger: false}); self.render(); }, error: function() { notifier.error_x("Please correct the field(s) marked in red below."); self.updateApplyButton(); } }); if (isValid === false) { // validation error self.updateApplyButton(); }
Solution #2 - Display the actual error(s)
var isValid = this.model.save(settings, { wait: true, success: function(model) { callback(model); var url = "/streams/" + model.get('id'); app.router.navigate(url, {trigger: false}); self.render(); }, error: function() { self.updateApplyButton(); } }); if (isValid === false) { // validation error for (var key in this.model.validationError) { if (this.model.validationError.hasOwnProperty(key)) { notifier.error_x(this.model.validationError[key]); } } self.updateApplyButton(); }
Discussion
The solution #1 is preferred because it directly tells the user to look below and secondly since it auto-fades after some time, it better not contain too complex instructions.
Also notice the isValid variable. It is actually a returned promise. But it happens to be null when there is validation error(s) so it can be evaluated as a boolean although it is not a solid as it could be.
Recent Comments