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

时间:2012-11-30 14:22:12

标签: knockout.js knockout-validation

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

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. 点击确认 - 出现错误消息,警告显示FAILED
  3. 在输入中输入任何文本,然后立即单击“验证” - 错误消息消失,但未显示任何警告。
  4. 再次单击“验证” - 只有现在警报才能显示成功文本。
  5. 如何解决这个问题,以便VALIDATE按钮在第一次点击时能正常工作?

    谢谢, 的Ihor

2 个答案:

答案 0 :(得分:2)

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

当您从字段中失去焦点时,它会验证字段并删除文本,使按钮更改位置并且您的点击忽略按钮

http://jsfiddle.net/s2bbd/

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

Stackoverflow wont let me post this without code

答案 1 :(得分:0)

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

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