I am using Backbone.Validation plugin to validate a simple form. Below is my model
var BuyerModel = Backbone.Model.extend({
defaults: {
name: '',
age: ''
},
validation: {
name: {
required: true
},
age: {
min: 18
}
},
initialize: function () {
_.extend(Backbone.Model.prototype, Backbone.Validation.mixin);
}
});
Below is my view
var BuyerModelFormView = Backbone.View.extend({
events: {
'click [name~="save"]': 'save'
},
initialize: function () {
Backbone.Validation.bind(this);
},
template: _.template('\
<form>\
Enter name:\
<input name="name" type="text" value="<%= name %>"><br>\
Enter age:\
<input name="age" type="text" value="<%= age %>"><br>\
<input type="button" name="save" value="Save">\
</form>\ '),
render: function () {
var html = this.template(this.model.toJSON());
$(this.el).html(html);
},
save: function () {
console.log(this.model.toJSON());
this.model.set({
name: $('[name~="name"]').val(),
age: $('[name~="age"]').val()
});
console.log(this.model.toJSON());
}
});
Here is how I am using it
var buyerModel = new BuyerModel();
var buyerModelFormView = new BuyerModelFormView({
model: buyerModel,
el: 'body'
});
buyerModelFormView.render();
When I enter anything in the form and hit enter it updates model but does not validate. Even if I enter incorrect value model still gets update.
What am I doing wrong and how can I solve this?
Set force validation like this
this.model.set({
name: $('[name~="name"]').val(),
age: $('[name~="age"]').val()
}, {validate: true});
Is it what you want?
Because Model.set has such string
// Run validation.
if (!this._validate(attrs, options)) return false;
And
// Run validation against the next complete set of model attributes,
// returning `true` if all is well. Otherwise, fire an `"invalid"` event.
_validate: function(attrs, options) {
if (!options.validate || !this.validate) return true;
So if you didn't pass validate - it will be ignored
Check in such way
$(function(){
var buyerModel = new BuyerModel();
buyerModel.on('change', function(){
console.log('on change', arguments);
});
var buyerModelFormView = new BuyerModelFormView({
model: buyerModel,
el: 'body'
});
buyerModelFormView.render();
});
Related
In my App i have created a View. this View is composed of a Template like a little Form. The Form has an button and in my View i create an click event to handle this button to create a new instance of another View passing the Form data to this View and put the data on html element. The problem is: if i enter in home route or in product 3 times and send a Form data, will appears 3 same Form datas.
Form view
window.userFormView = Backbone.View.extend({
el:$("#principal"),
events : {
'click .userButton' : 'newUser'
},
initialize:function(){
this.template = _.template($("#userFormView").html());
},
newUser : function(ev) {
ev.preventDefault();
//criamos uma nova instancia do model
window.user_view = new userViewes({model: users});
var u = { nome : $("#iName").val() ,sobrenome : $("#iLName").val() };
var user = new userModel(u);
users.add(user);
console.log(users);
return false;
},
render: function() {
this.$el.html("");
this.$el.html(this.template);
}
});
Form Template View
<script type="text/template" id="userFormView">
<form action="" id="form-new-user" class="formulario">
<span class="label">Name?</span><input type="text" id="iName" class="input">
<span class="label">Last Name?</span><input type="text" id="iLName" class="input">
<button class="userButton">Send</button>
<hr>
</form>
</script>
and my route are like this:
window.AppRouter = Backbone.Router.extend({
//
// Definindo rotas
//
routes: {
'home': 'index',
'product': 'productsList',
'foo1': 'doNothing1',
'foo2': 'doNothing2'
},
index: function () {
window.users = new userCollections();
window.userForm = new userFormView();
},
productsList : function() {
window.pCollection = new productCollections();
window.produtoForm = new produtoFormView();
},
doNothing1: function () {
console.log('doNothing1()');
},
doNothing2: function () {
console.log('doNothing2()');
}
});
window.router = new AppRouter();
Backbone.history.start();
userViewes view
window.userViewes = Backbone.View.extend({
// model: users,
el: $("#userContainer"),
initialize: function(){
this.model.on("add", this.render, this);
this.model.on("remove", this.render, this);
},
render: function() {
var self = this;
self.$el.html("");
this.model.each(function(user, indice) {
self.$el.append((new userView({model: user })).render().$el);
});
return this;
}
});
and finally userView:
window.userView = Backbone.View.extend({
//model: new userModel(),
tagName : 'div',
class : "userName",
events :{
'click .editar' : 'editar',
'click .remover' : 'remover',
'blur .sobrenome': 'fechar',
'keypress .sobrenome' : 'onEnterUpdate',
},
editar : function(ev) {
ev.preventDefault();
this.$('.sobrenome').attr('contenteditable', true).focus();
},
fechar : function(ev) {
var sobrenome = $(".sobrenome").text();
this.model.set("sobrenome", sobrenome);
$(".sobrenome").val();
this.$(".sobrenome").removeAttr("contenteditable");
},
onEnterUpdate : function(ev) {
var self = this;
if(ev.keyCode == 13) {
self.fechar();
_.delay(function(){
self.$(".sobrenome").blur();
}, 100);
}
},
remover : function(ev) {
ev.preventDefault();
window.users.remove(this.model);
},
initialize: function(){
this.template = _.template($("#userTemplate").html());
},
render : function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
When your view is using el option, make sure you clean up the existing view before you make a new one.
As it is, every time you switch between routes (without a full page refresh) a new instance pointing to same element is created which causes more and more event handlers to be bound to the el element which is in DOM, and the views stay in memory because of the binding. Try something like:
index: function () {
window.users = window.users || new userCollections();
if(window.userForm){
// clean up is important
window.userForm.remove();
}
window.userForm = new userFormView();
},
And of course, instead of repeating similar code in all routes, have a variable like this.currentView that points to the active view, and a common function that does necessary clean up
P.S: Adding properties to window object is a bad practice. Create your own name space or use the Router instance instead of window
I have found the answer. i implemented singleton pattern to get only one instance of the object. follow the code:
var single = (function(){
function createInstance() {
window.userForm = new userFormView();
window.users = new userCollections();
}
function users() {
return window.users;
}
function userForm() {
return window.userForm;
}
return {
init : function() {
if(!window.users && !window.userForm) {
createInstance();
}else{
this.render();
}
},
render: function() {
window.userForm.render();
}
}
}());
single.init();
I have a model as
var Info = Backbone.Model.extend({
url: '',
defaults: {
username: '',
email: '',
error: ''
},
initialize: function(){
console.log('Obj created');
},
validate: function(attr){
if(!attr.username){
attr.error = 'Username cannot be empty';
}
}
});
View
var model = new Info();
var View1 = Backbone.View.extend({
model: model,
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#App1').html());
this.$el.html(template);
},
'events': {
'click #btn1': 'submit'
},
submit: function(){
var obj = {
username: $('#username').val(),
email: $('#pwd').val)
};
this.model.save();
}
});
Here I want to set model.set({error: 'Message goes here'}) during validate event.
However, validate only returns true / false. Is there a way we can set the value in the validate method.
You can set an error property inside validate() function:
this.set('error', 'Message goes here')
Once set, error message will be accessible via this.model.get('error') from within view object code.
So I have a new form set up it saves temporarily and all but I want it to only be able to update when it is validated otherwise show some errors. This is during the view section for the saveEdits event Any clue as to what I am doing wrong?
This is my main.js file
(function () {
window.App = {
Models: {},
Collections: {},
Views: {},
Templates: {},
Router: {}
};
// MODEL
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'first',
lastName: 'last',
email: 'Email',
phone: '222',
birthday: '07/22/1980'
},
validate: function (attrs) {
if (!attrs.firstName) {
return 'You must enter a real first name.';
}
if (!attrs.lastName) {
return 'You must enter a real last name.';
}
if (attrs.email.length < 5) {
return 'You must enter a real email.';
}
if (attrs.phone.length < 10 && attrs.phone === int) {
return 'You must enter a real phone number, if you did please remove the dash and spaces.';
}
if (attrs.city.length < 2) {
return 'You must enter a real city.';
}
},
initialize: function() {
this.on('invalid', function (model, invalid) {
console.log(invalid);
});
}
});
//var userModel = new App.Models.User();
//VIEW
App.Views.User = Backbone.View.extend({
el: '#user',
//model: userModel,
//tagName: 'div',
//id: 'user',
//className: 'userProfile',
//template: _.template($("#userTemplate").html()),
//editTemplate: _.template($("#userEditTemplate").html()),
initialize: function (){
},
render: function() {
this.template = Handlebars.compile($("#userTemplate").html());
this.editTemplate = Handlebars.compile($("#userEditTemplate").html());
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
'click button.edit': 'editProfile',
'click button.save': 'saveEdits',
'click button.cancel': 'cancelEdits'
},
editProfile: function () {
this.$el.html(this.editTemplate(this.model.toJSON()));
},
saveEdits: function () {
var form = $(this.el).find('form#updateUser');
this.model.set({
firstName : form.find('.firstName').val(),
lastName : form.find('.lastName').val(),
email: form.find('.email').val(),
phone: form.find('.phone').val(),
birthday: form.find('.birthday').val()
});
this.model.validate();
this.render();
},
cancelEdits: function() {
this.render();
}
});
//start history service
Backbone.history.start();
var user = new App.Views.User({model: new App.Models.User()});
user.render();
})();
It works fine until I insert the this.model.validate and an error shows up stating this:
Uncaught TypeError: Cannot read property 'firstName' of undefined
You don't call validate explicitly -- it's meant called by the Backbone framework:
By default validate is called before save, but can also be called before set if {validate:true} is passed.
So to fix the code in the OP, use validate: true in the call to set:
this.model.set({
firstName : form.find('.firstName').val(),
// ...
}, { validate: true });
Note that, if you wanted to call validate, then you have to pass it the attrs parameter, as in this.model.validate(this.model.toJSON());
so I am trying to get the validate from my model to actually disable the save button but to re-validate when new input is included. Anyone know the best way to attempt this. Thanks! The problem I have with my method is that once it is disabled it doesn't return in state.
Here is the main.js file
(function () {
window.App = {
Models: {},
Collections: {},
Views: {},
Templates: {},
Router: {}
};
// MODEL
App.Models.User = Backbone.Model.extend({
defaults: {
firstName: 'first',
lastName: 'last',
email: 'Email',
phone: '222',
birthday: '07/22/1980'
},
validate: function (attrs) {
if (!attrs.firstName) {
return 'You must enter a real first name.';
}
if (!attrs.lastName) {
return 'You must enter a real last name.';
}
if (attrs.email.length < 5) {
return 'You must enter a real email.';
}
if (attrs.phone.toString().length < 10 ) {
//&& attrs.phone === int
return 'You must enter a real phone number, if you did please remove the dash and spaces.';
}
// if (attrs.birthday.length < 2) {
// return 'You must enter a real city.';
//}
},
initialize: function() {
this.on('invalid', function (model, invalid) {
console.log(invalid);
alert(invalid);
});
}
});
//var userModel = new App.Models.User();
//VIEW
App.Views.User = Backbone.View.extend({
el: '#user',
//model: userModel,
//tagName: 'div',
//id: 'user',
//className: 'userProfile',
//template: _.template($("#userTemplate").html()),
//editTemplate: _.template($("#userEditTemplate").html()),
initialize: function (){
},
render: function() {
this.template = Handlebars.compile($("#userTemplate").html());
this.editTemplate = Handlebars.compile($("#userEditTemplate").html());
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
'click button.edit': 'editProfile',
'click input.save': 'saveEdits',
'click button.cancel': 'cancelEdits'
},
editProfile: function () {
this.$el.html(this.editTemplate(this.model.toJSON()));
},
saveEdits: function () {
var form = $(this.el).find('form#updateUser');
this.model.set({
firstName : form.find('.firstName').val(),
lastName : form.find('.lastName').val(),
email: form.find('.email').val(),
phone: form.find('.phone').val(),
birthday: form.find('.birthday').val()
}, {validate: true} );
if(!this.model.isValid()) {
console.log('run');
$('.save').attr("disabled", "disabled");
} else {
console.log('run2');
alert('Changes have been made.');
$('.save').removeAttr("disabled");
return this.render();
}
},
},
cancelEdits: function() {
this.render();
}
});
//start history service
Backbone.history.start();
var user = new App.Views.User({model: new App.Models.User()});
user.render();
})();
And here is the Jade File:
extends layout
block content
div.centerContent
h4 User goes here with equal before it no space
div#user
p #{firstName} #{lastName}
p #{email}
p #{phone}
p #{birthday}
button.edit Edit
script(id="userTemplate", type ="text/template")
p {{firstName}} {{lastName}} 1
p {{email}} 2
p {{phone}} 3
p {{birthday}} 4
button.edit Edit
script(id="userEditTemplate", type ="text/template")
div
form(action="#")#updateUser
input(type="text", class="firstName", value='{{firstName}}')
input(type="text", class="lastName", value='{{lastName}}')
input(type="email", class="email", value='{{email}}')
input(type="number", class="phone",, value='{{phone}}')
input(type="date", class="birthday", value='{{birthday}}')
input(type="submit", value="Save").save Save
button.cancel Cancel
hr
script(type="text/javascript", src="/js/main.js")
The problem here is that you're calling the { validate: true } option to your model.set method, then you're subsequently calling model.isValid().
When you call model.set with the validate option set to true, Backbone.js will not set the properties you pass unless they all pass validation. So, by the time you call model.isValid() the model has been changed back to the previous version (before the .set call). model.isValid() automatically calls the model.validate() method and passes the current attributes of the model to it.
In your example, the values being passed to validate by the isValid method are the current (valid) attributes of your model. Because of this, isValid() is always going to validate to true. Which will cause you to never reach your else clause.
The solution here is instead of calling isValid to see if your model is valid (after passing validate: true to the set method) check the value of model.validationError. If model.validationError is a truthy value, then you know your model is invalid.
Here's a JSFiddle with an example of how to do that, with some documentation.
Why won't validate fire the error as "fred" should make the validate condition return true when it is set?
Person = Backbone.Model.extend({
initialize: function () {
console.log('inisialize Person');
this.bind("change:name", function () {
console.log(this.get('name') + ' is now the name value')
});
this.bind("error", function (model, error) {
console.log(error);
});
},
defaults: {
name: '',
height: ''
},
validate: function (attributes, options) {
if (attributes.name == "fred") { //why wont this work?
return "oh no fred is not allowed";
}
}
});
//var person = new Person({ name: 'joe', height: '6 feet' });
var person = new Person();
person.set({ name: 'fred', height: '200' });
Your validate() is called when saving, but not when setting an attribute unless you explicitly tell it to do so. From the docs:
By default validate is called before save, but can also be called
before set if {validate:true} is passed.
Try this: In the initialize(), change the this.bind('error') to this.on('invalid') The 'error' event is for failures at the server, after when calling save(). The 'invalid' is for validation errors on the client side. Lastly, add {validate: true} as a second argument to the person.set() calls. Backbone doesn't validate set() by default.
Person = Backbone.Model.extend({
defaults: {
name: '',
height: ''
},
validate: function(attributes) {
if(attributes.name === 'fred' )
return 'oh no fred is not allowed';
},
initialize: function() {
alert('welcome');
this.on('invalid', function(model, error){
alert(error);
});
//listeners
this.on('change:name', function(model) {
var name = model.get('name');
alert('changed ' + name);
});
});
var person = new Person();
person.set({ name: 'fred', height: '200' }, {validate: true}); //oh no fred is not allowed