驗證點擊兩個按鈕

Question

我有兩個文本框與value綁定兩個observable：first和second。有兩個保存按鈕與click綁定到功能save1和save2。

情景，我應該滿足：

對於save1功能：

1. 當我在first輸入一些東西，什麼是second，並save1點：指其應保存。

   當我進入first的東西，在second輸入一個值，然後單擊save1

2. ：指其應驗證second對first並確保second比first更大。

爲save2功能：

的save1正好相反，即：

1. 當我在second輸入一些東西，什麼是first，我點擊save2：手段它應該保存。

2. 當我進入second的東西，在first輸入一個值，然後單擊save2：意味着它應該驗證first對第二，確保first小於second。

這種情況看起來非常簡單，但我被阻止向前移動以完成代碼。我的小提琴，這主要有這裏給出的代碼試圖（縮寫爲做專可讀）：

視圖模型：

var viewModel = function() { 
    var self=this; 
    self.first=ko.observable(); 
    self.second=ko.observable(); 

    //custom validation code & click functions 
    self.validatefirst=ko.validatedObservable([ 
    self.first.extend({//code here}) ]) 

    self.validatesecond=ko.validatedObservable([ 
    self.second.extend({//code here}) ]) 
} 

查看：

<label>First value: <input data-bind='value:first'/></label> 
<label>Second value: <input data-bind='value:second'/></label> 
<input type="submit" value="save first" data-bind="click:save1" /> 
<input type="submit" value="save second" data-bind="click:save2" /> 

參見my jsfiddle with complete code 。

據我所見，我覺得我們不能實現這一點，因爲只有單個觀察點，我們試圖對兩個按鈕進行多個操作。

對此的任何幫助表示讚賞。

Answer 1

我使用了每個按鈕的可觀察性，如果按鈕被點擊，它們被設置爲true。這用於僅激發我與onlyIf一起使用的必需和數字驗證。然後，我在second()上添加了兩個自定義驗證器，以執行比較檢查。

var viewModel = function() { 
    var self=this; 

    self.first=ko.observable(''); 
    self.second=ko.observable(''); 
    self.validateFirst = ko.observable(false); 
    self.validateSecond = ko.observable(false); 

    self.first.extend({ 
     required: { 
      message: "First is required", 
      onlyIf: function() { return self.validateFirst();} 
     }, 
     number: { 
      message: "Not a number", 
      onlyIf: function() { return self.validateFirst();} 
     } 
    }); 

    self.second.extend({ 
     required: { 
      message: "Second is required", 
      onlyIf: function() { return self.validateSecond();} 
     }, 
     number: { 
      message: "Not a number", 
      onlyIf: function() { return self.validateSecond();} 
     }, 
     validation: [{ 
      validator: function (val) { 
       if (!self.validateFirst() || self.second() === '') { 
        return true;   
       } 

       var secondInt = parseInt(self.second()); 
       var firstInt = parseInt(val); 
       return secondInt > firstInt; 
      }, 
      message: 'Please enter second value greater than first value' 
     }, 
     { 
      validator: function (val) { 
       if (!self.validateSecond() || self.first() === '') { 
        return true;   
       } 

       var firstInt = parseInt(self.first()); 
       var secondInt = parseInt(val); 
       return secondInt > firstInt; 
      }, 
      message: 'Please enter second value greater than first value' 
     }] 
    }); 

    self.save1=function(){ 
     self.validateSecond(false); 
     self.validateFirst(true); 

     if(self.isValid()){ 
      alert('Saved'); 
     } 
     else { 
      self.errors.showAllMessages(); 
     } 
    }; 

    self.save2=function(){ 
     self.validateFirst(false); 
     self.validateSecond(true); 

     if(self.isValid()){ 
      alert('Saved'); 
     } 
     else { 
      self.errors.showAllMessages(); 
     } 
    }; 

    ko.validatedObservable(self); 
}; 

jsFiddle