2013-10-18 66 views
0

我在Backbone驗證方面有幾個問題,但似乎我找到了正確的方法。我已成功地實現以下目標:主幹提交表單驗證

var EditUser = Backbone.View.extend({ 
el:'.page', 
validates:function(evt){ 
    console.log('here'); 
    var $field = $(evt.currentTarget); 
    if($field.val() === ''){ 
     $field.css('border', '1px solid red'); 
     return false; 
    } 
    else{ 
     $field.css('border', '1px solid #ccc'); 
    } 
}, 
render: function(options){ 
    var that = this; 
    if(options.id){ 
     that.user = new User({id: options.id}); 
     that.user.fetch({ 
      success: function(user){ 
       var template = _.template($('#edit-user-template').html(), {user:user}); 
       that.$el.html(template); 
      } 
     }); 
    } else{ 
     var template = _.template($('#edit-user-template').html(), {user:null}); 
     this.$el.html(template); 
    } 
}, 
events: { 
    'keyup input[name=firstname], input[name=lastname], input[name=age]': 'validates', 
    'submit .edit-user-form': 'saveUser', 
    'click .delete': 'deleteUser' 
}, 
saveUser: function (ev){ 
    this.$('input[type=text]').each(function() { 
     $(this).trigger('keyup'); 
    }); 
    var userDeatils = $(ev.currentTarget).serializeObject(); 
    var user = new User({validate:true}); 
    user.save(userDeatils,{ 
     success: function(user){ 
      router.navigate('', {trigger:true}); 
     } 
    }) 
    return false; 
}, 
deleteUser: function(ev){ 
    this.user.destroy({ 
     success: function(){ 
      router.navigate('', {trigger:true}); 
     } 
    }); 
    return false; 
} 
}); 

一切正常,當我在輸入字段開始打字,但是我需要同樣的動作,當我提交表單的情況發生。 (已連接了一個saveUser)。我需要找到一種運行驗證螞蟻的方法,在「saveUser」被調用之前停止提交空白細節的表單。

+0

你有沒有考慮過爲User模型實現'validate'函數並在'saveUser'中調用'user.isValid'? –

+0

是的,但不幸的是它不工作.... – Alex

+0

你的意思是「它不工作」,你能給我們一個你已經嘗試過的例子嗎? –

回答

1

更改validates如下所示。

validates:function(evt, $field){ 
    var valid = true; 

    if(evt) 
     $field = $(evt.currentTarget); 

    if($field.val() === ''){ 
     $field.css('border', '1px solid red'); 
     valid = false; 
    } 
    else{ 
     $field.css('border', '1px solid #ccc'); 
    } 

    return valid; 
} 

saveUser如下所示。

saveUser: function (ev){ 
    var valid = true, that = this; 

    this.$('input[type=text]').each(function() { 
     valid = that.validates(null, $(this)); // validate input. 
     if (!valid) return false; //break out from loop. 
    }); 

    if (valid) { 
     var userDeatils = $(ev.currentTarget).serializeObject(); 
     var user = new User({validate:true}); 
     user.save(userDeatils,{ 
      success: function(user){ 
       router.navigate('', {trigger:true}); 
      } 
     });   
    } 

    return false; 
}