使用Knockout进行表单验证

Question

我在我的项目中使用了knockoutJS。以下是代码片段：

<input class="form-control" id="name" type="text" style = "width:100%" placeholder = "Enter name" data-bind="event:{keyup: checkDetails}"> 

<select class="form-control" id="type" style = "width:100%"> 
     <option>Type 1</option> 
     <option>Type 2</option> 
     <option>Type 3</option> 
     <option>Type 4</option> 
</select> 

<input class="form-control" id="date" type="date" style = "width:100%" data-bind="event:{click: checkDetails}"> 

<button type="button" class="btn btn-primary" id = "add_goal" data-bind = "enable:formFilled">Add Goal</button> 

<script type="text/javascript"> 
     function myViewModel() { 
      var self = this; 
      self.formFilled = ko.observable(false); 
      self.checkDetails = function(){ 
       console.log("hello"); 
       if($("#name").val() != "" && $("#date").val() != ""){ 
        self.formFilled = ko.observable(true); 
       } 
      }; 
      console.log(self.formFilled()); 
     } 
     ko.applyBindings(new myViewModel()); 
</script> 

有三个字段，我想只有激活“添加目标”按钮，当所有的字段都填满。疑惑是：我应该在HTML5日历中添加哪个事件，以及为什么在“checkDetails”函数中将它设置为true时按钮没有被激活。

Answer 1

formFilled是一个可观察的，所以你需要将它设置为一个函数。

if($("#name").val() != "" && $("#date").val() != ""){ 
    self.formFilled(true); 
} 
else { 
    self.formFilled(false); 
} 

而且你data-bind="event:{click: checkDetails}">正在寻找点击事件，我想这应该更改为keyup。