patternjavascriptMinor
Simple registration form with Backbone
Viewed 0 times
simpleregistrationwithbackboneform
Problem
I am trying to create simple registration form with Backbone. I need to validate fields on blur, and whole form on submit.
HTML:
Model:
View:
```
app.__definitions.views.Signup = Backbone.View.extend({
el: $('form'),
events: {
'submit': 'onFormSubmit',
'change input[type!="submit"]': 'onInputChange',
'blur input[type!="submit"]': 'onInputChange',
'focus input': function(e) {
this.resetInputErrors(e.target);
}
},
templates: {
'error': _.template('')
},
initialize: function() {
this.model = new app.__definitions.models.Signup();
this.model.on('invalid', this.onModelInvalid, this);
},
getInput: function(name) {
return this.$el.find('[name="' + name + '"]');
},
onModelInvalid: function(model, errors) {
var _this = this;
_.each(errors, function(error, name) {
_this.showInputErrors(_this.getInput(name), error);
})
},
onFormSubmit: function(e) {
e.preventDefault();
var model = this.model;
this.$el.find('input[name]').each(function() {
model.set(this.name, this.value);
})
this.model.save();
},
onInputChange: function(e) {
this.model.set(e.target.name, e.target.value);
var result = this.model.validateOne(e.target.name, e.target.value);
if (result !== t
HTML:
Model:
app.__definitions.models.Signup = Backbone.Model.extend({
url: '/app/signup',
defaults: {
name: '',
surname: '',
email: '',
password: '',
pagename: ''
},
validateOne: validator.validateOne,
validate: function(fields) {
var result = validator.validateAll(fields);
if (result !== true) return result;
}
});View:
```
app.__definitions.views.Signup = Backbone.View.extend({
el: $('form'),
events: {
'submit': 'onFormSubmit',
'change input[type!="submit"]': 'onInputChange',
'blur input[type!="submit"]': 'onInputChange',
'focus input': function(e) {
this.resetInputErrors(e.target);
}
},
templates: {
'error': _.template('')
},
initialize: function() {
this.model = new app.__definitions.models.Signup();
this.model.on('invalid', this.onModelInvalid, this);
},
getInput: function(name) {
return this.$el.find('[name="' + name + '"]');
},
onModelInvalid: function(model, errors) {
var _this = this;
_.each(errors, function(error, name) {
_this.showInputErrors(_this.getInput(name), error);
})
},
onFormSubmit: function(e) {
e.preventDefault();
var model = this.model;
this.$el.find('input[name]').each(function() {
model.set(this.name, this.value);
})
this.model.save();
},
onInputChange: function(e) {
this.model.set(e.target.name, e.target.value);
var result = this.model.validateOne(e.target.name, e.target.value);
if (result !== t
Solution
Generally it looks like your know what your doing, maybe you could be more efficient by removing the
Backbone will automatically create
Finally i would use
would be done like this using
This allows you to keep track of events on the object and then remove them all at once later on.
blur event since you wouldn't need to save/validate if the input is already populated or left empty, this will also save you calling onInputChange twice when an input is changed.Backbone will automatically create
this.$el from the el property so you can just do.el: 'form' and then this.$el would be created for you.Finally i would use
listenTo rather than on for example.this.model.on('invalid', this.onModelInvalid, this);would be done like this using
listenTo.this.listenTo(this.model, 'invalid', this.onModelInvalid);This allows you to keep track of events on the object and then remove them all at once later on.
Context
StackExchange Code Review Q#41192, answer score: 2
Revisions (0)
No revisions yet.