Question

我想在用户按钮单击时显示错误消息（如果用户打开页面并直接单击按钮）。但可见状态工作就像用户编辑字段一样如何解雇方法改变可见状态？

<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();
            };    
        })
    });

感谢。

Answer 1

删除不需要的用户定义的错误范围。

选项1（推荐）

1。）导入ko validation js。

2.）延长验证

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

3.）设置初始显示验证错误msg == false

4.。）set value == 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();
        };    
    })
});

敲击更改按钮单击时跨越可见状态

1 个答案: