按鈕點擊擊倒更改範圍可見狀態

我想在用戶按鈕點擊時顯示錯誤消息（以防用戶打開頁面並直接點擊按鈕）。但只有用戶編輯字段時可見狀態才能工作如何觸發方法以更改可見狀態？按鈕點擊擊倒更改範圍可見狀態

<body> 
    <input type="text" data-bind="value: can" id="txtcan" />       
         <span ID="lblCANerror" data-bind="visible:(viewModel.can()=='')" class="error">Mesasage 1</span>      
              <input type="text" data-bind="value: login" id="txtusername" /> 
         <span ID="lblUsernameError" data-bind="visible:(viewModel.login()=='')" class="error">Mesasage 2</span> 

         <input type="password" data-bind="value: password" name="txtpassword" /> 
         <span ID="lblPasswordError" data-bind="visible:(viewModel.password()=='')" class="error">Mesasage 3</span> 

         <button ID="lnkLogin" data-bind="click: ClickBtn"> Click</button>     

</body> 

<script type='text/javascript'> 
var ViewModel = function() { 
     this.can = ko.observable(); 
     this.login = ko.observable(); 
     this.password = ko.observable(); 
     this.isValidForm = ko.computed(function() { 
      return ($.trim(this.can) != "") && ($.trim(this.login) != "") && ($.trim(this.password) != ""); 
     }, this); 
    this.ClickBtn = function(data, e) 
    { 
     if (!this.isValidForm()) 
      { 

      e.stopImmediatePropagation(); 
      }; 
    }; 
    }; 

    var viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 



</script> 
    <style type='text/css'> 
    .error 
{ 
    color: #FF0000;  
} 
    </style>

我不想寫來寫手動變化幅度可見狀態（如IF）（當時span.show）代碼，是否可以只使用knockoutjs FW？我試過用JQuery訂閱事件，但結果是一樣的。

$().ready(function() { 
     $("#lnkLogin").click(function (event) { 
      if (!viewModel.isValidForm()) {     
       event.preventDefault(); 
      };  
     }) 
    });

謝謝。

來源

2013-03-26 Arbejdsglæde

刪除不需要的用戶定義錯誤。

選項1（推薦）

1）導入ko validation js。

2.）延伸驗證

this.can = ko.observable().extend({required:true});

3.）設定的初始顯示的驗證錯誤味精==假

4.）設定值== true將顯示錯誤

Check this fiddle how to show validation error msg when button click

選項2

1）添加另一個觀察的

this.showError = ko.observable(false);

2）修改條件點擊

data-bind="visible:(can()=='' && showError())"

3）變更

$().ready(function() { 
    $("#lnkLogin").click(function (event) { 

     //check contions here 
     if(!true){ 
      viewModel.showError(true); // to show error msg 
      } 

     if (!viewModel.isValidForm()) {     
      event.preventDefault(); 
     };  
    }) 
});

來源

2013-03-26 08:53:29 nav0611

是的，這是正確的方式我同意。但如何在我的情況下做到這一點？ – 2013-03-26 08:59:56

@ a3code答案能解決您的問題嗎？ – nav0611 2013-03-26 09:30:27

我很確定它會。但由於某種原因，我需要嘗試在我的情況下解決它。 – 2013-03-26 09:32:06

按鈕點擊擊倒更改範圍可見狀態

回答

相關問題