SO: Registration form validation issue in BackboneJS
In answer to http://stackoverflow.com/questions/22424035/registration-form-validation-issue-in-backbonejs
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
JavaScript
function IsEmail(email) {
var regex = /^[A-Za-z]([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
var Reg = Backbone.Model.extend({
url: '#',
defaults: {
name: '',
email: '',
password: ''
},
validate: function (attrs) {
var errors = [];
if (!attrs.name) {
errors.push({name: 'name', message: 'Please fill name field.'});
}
if (!(IsEmail(attrs.email))){
errors.push({name: 'email', message: 'Please fill email field.'});
}
if (!attrs.password) {
errors.push({name: 'password', message: 'Please fill password field.'});
}
return errors.length > 0 ? errors : false;
}
});
var RegView = Backbone.View.extend({
className: 'row',
template: '\
<form>\
<legend>Register Yourself</legend>\
<div class="control-group name">\
<label>Username</label>\
<input type="text" id="name" placeholder="Your name...">\
<span class="error-inline"></span>\
</div>\
<div class="control-group password">\
<label>Password</label>\
<input type="text" id="password" placeholder="Your password...">\
<span class="error-inline"></span>\
</div>\
<div class="control-group email">\
<label>Email</label>\
<input type="text" id="email" placeholder="Your email address...">\
<span class="error-inline"></span>\
</div>\
<button type="submit" id="submit" class="btn">Submit</button>\
</form>\
',
events: {
'click #submit': 'submitClicked'
},
render: function () {
this.$el.html(this.template);
return this;
},
submitClicked: function (e) {
e.preventDefault();
this.hideErrors();
...