使用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。