Simple registration form with Backbone I am trying to create simple registration form with Backbone.  I need to validate fields on blur, and whole form on submit.

HTML:

&lt;form&gt;
        &lt;div&gt;&lt;input name="name" type="text" placeholder="Name"/&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input name="surname" type="text" placeholder="Surname"/&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input name="email" type="text" placeholder="Your mail"/&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input name="password" type="password" placeholder="Password"/&gt;&lt;/div&gt;
        &lt;div&gt;&lt;input name="pagename" type="text" placeholder="Page name"/&gt;&lt;/div&gt;

        &lt;input type="submit" value="Go"&gt;&lt;/input&gt;
&lt;/form&gt;


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('&lt;span class="error"&gt;&lt;%=error%&gt;&lt;/span&gt;')
    },

    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 !== true) this.showInputErrors(e.target, result)
    },

    resetInputErrors: function(target) {
            var $target = $(target);
            $target.removeClass('incorrect')
            $target.parent().find('.error').remove();
    },

    showInputErrors: function(target, errors) {
            var $target = $(target);
            var errorsHTML = '';

            this.resetInputErrors(target);

            for (var i = 0; i &lt; errors.length; i++) {
                    errorsHTML += this.templates.error({error: se.errors.get(errors[i])});
            }

            $target.addClass('incorrect'); 
            $target.parent().append(errorsHTML);
    }
    });


Init:

 app.views.Signup = new app.__definitions.views.Signup();
 app.routers.Router = new app.__definitions.routers.Main({hashChange: true}); 


Questions:


Do I understand right how to make Backbone application?
Where is the mistakes? What can I do better or clearer? 
Is there a better way to connect model with inputs on my form, or my getInput is ok? 
In my case I don't need to use the collection? Am I right?
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.