I am trying to create simple registration form with Backbone. I need to validate fields on blur, and whole form on submit.
HTML:
<form>
<div><input name="name" type="text" placeholder="Name"/></div>
<div><input name="surname" type="text" placeholder="Surname"/></div>
<div><input name="email" type="text" placeholder="Your mail"/></div>
<div><input name="password" type="password" placeholder="Password"/></div>
<div><input name="pagename" type="text" placeholder="Page name"/></div>
<input type="submit" value="Go"></input>
</form>
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('<span class="error"><%=error%></span>')
},
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 < 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?