HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Simple registration form with Backbone

Submitted by: @import:stackexchange-codereview··
0
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:

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 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.