Knockout Validation 首次阻止点击处理程序答案

【问题标题】：Knockout Validation preventing click handler for the first timeKnockout Validation 首次阻止点击处理程序
【发布时间】：2012-11-18 18:43:15
【问题描述】：

似乎淘汰验证插件以某种方式阻止执行点击处理程序。这是我的简化代码。

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>

我的场景：

加载页面
单击 VALIDATE - 出现错误消息并且警报显示 FAILED
在输入中输入任何文本并立即单击验证 - 错误消息消失，但未显示警报。
再次点击 VALIDATE - 现在只能看到带有 SUCCEED 文本的警报。

如何解决这个问题，以便验证按钮在第一次点击时就可以正常工作？

谢谢，伊霍尔

【问题讨论】：

标签： knockout.js knockout-validation

【解决方案1】：

3) 你永远不会点击按钮 :D

发生的情况是，当您从该字段失去焦点时，它会验证该字段并删除文本，从而使按钮改变位置并且您的点击错过了按钮

http://jsfiddle.net/s2bbd/

这个工作就像你怀疑的那样 http://jsfiddle.net/s2bbd/1/

Stackoverflow wont let me post this without code

【讨论】：

好的，这看起来很合乎逻辑，但我不能只恢复现有的错误消息代码，这会改变按钮的位置。我需要另一种解决方法...
您可以更改，以便将值提交到文本框中的 keydown 上的 observable，这样验证消息将在您离开框之前隐藏

【解决方案2】：

在点击之前进行验证的另一种方法是使用鼠标悬停来模糊当前元素。

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

【讨论】：