1

ユーザーのボタンクリック時にエラーメッセージを表示したい（ユーザーがページを開いてボタンを直接クリックした場合）。しかし、ユーザーがフィールドを編集した場合にのみ、表示状態が機能します。メソッドを起動して表示状態を変更するにはどうすればよいですか？

<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（）then span.showのように）knockoutjs FWだけを使用することは可能ですか？JQueryでイベントをサブスクライブしようとしましたが、結果は同じです。

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

ありがとう。

4

1 に答える 1

1

不要なユーザー定義のエラースパンを削除します。

オプション1（推奨）

1.）ko検証jsをインポートします。

2.）検証を拡張する

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

3.）初期表示検証エラーmsg==falseを設定します

4.）エラーを表示するには値==trueを設定します

ボタンをクリックしたときに検証エラーメッセージを表示する方法をこのフィドルで確認してください

オプション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-26T08:53:29.343 に答える