2012-11-30 47 views
2

看來,基因敲除驗證插件以某種方式阻止執行點擊處理程序。 這是我的簡化代碼。Knockout驗證首次防止點擊處理程序

HTML:

<div> 
    <input type="text" data-bind="value: code" /> 
    <button data-bind="click: execute">VALIDATE</button> 
</div 

的Javascript:

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var ViewModel = function() { 
      var self = this; 
      this.code = ko.observable(); 
      this.code.extend({ required: true }); 
      this.execute = function() { 
       if (self.code.isValid()) { 
        alert("SUCCEED"); 
       } 
       else { 
        self.code.valueHasMutated(); //just to show error message 
        alert("FAILED"); 
       } 
      }; 
     }; 

     ko.applyBindings(new ViewModel()); 
    }); 
</script> 

我的情景:

  1. 加載頁面
  2. 單擊驗證 - 出現錯誤信息和警報顯示失敗的
  3. 在輸入中輸入任何文本並立即單擊驗證 - 錯誤消息消失,但未顯示警報。
  4. 再次點擊驗證 - 現在只有成功的文本才能看到警報。

如何解決這個問題,這樣VALIDATE按鈕就能從第一次點擊開始正常工作?

感謝, 伊霍爾

回答

2

3)你永遠不點擊按鈕:d

會發生什麼事是,當你從外地失去焦點它將驗證字段和文本被刪除使得按鈕改變位置和你錯過點擊按鈕

http://jsfiddle.net/s2bbd/

這一個就像你懷疑 http://jsfiddle.net/s2bbd/1/

Stackoverflow wont let me post this without code 
+0

好吧,看起來很安靜的邏輯,但我不能只是恢復現有代碼的錯誤消息,這改變了按鈕的位置。 我需要另一種解決方法... –

+0

您可以更改,以便將值提交給文本框中的keydown上的observable,這樣驗證郵件將在您離開框之前隱藏 – Anders

+0

我會盡力,感謝您的幫助。 –

0

單擊之前驗證的另一種方法是使用鼠標懸停來模糊當前元素。

<button data-bind="click: execute" onmouseover="document.activeElement.blur();">VALIDATE</button>