Kendo/jquery验证/引导代码中奇怪的验证行为

在使用KendoUI、jquery验证插件和引导创建应用程序时，我看到了不一致的验证消息。根据填写的顺序，字段可能会被验证，也可能不会被验证

该示例包含两个选项卡，每个选项卡都有自己的表单。每个表单都有几个字段，这些字段通过jquery验证进行验证。验证设置中的突出显示和成功处理程序用于在验证成功/失败时更改字段/标签的颜色。还有一个validate按钮，它在每个表单上手动执行valid（）方法，并显示带有结果的警报

以下是HTML：

<div id="tabs">
<ul>
    <li class="k-state-active">First Form</li>
    <li>Second Form</li>
</ul>
<div>
    <form id="first-form" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="field1">First</label>
            <div class="controls">
                <input type="text" id="field1" name="first" required
                    class="input-xlarge">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="field2">Second</label>
            <div class="controls">
                <input type="text" id="field2" name="second" required
                    class="input-xlarge">
            </div>
        </div>
    </form>
</div>
<div>
    <form id="second-form" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="field3">Third</label>
            <div class="controls">
                <input type="text" id="field3" name="third" required
                    class="input-xlarge">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="field4">Fourth</label>
            <div class="controls">
                <input type="text" id="field4" name="fourth" required
                    class="input-xlarge">
            </div>
        </div>
    </form>
</div>
</div>
<div class="modal-footer">
    <a id="dialog-submit" href="javascript:void(0)" class="btn btn-primary">Create</a>
</div>

看看这个JSFIDLE中正在运行的代码：

看看我遇到的问题的一个例子。单击字段1并键入一个单词，然后单击字段2并键入一个单词。单击返回字段1并删除单词，然后单击字段2并删除单词。顶部字段不显示错误消息，而底部字段显示错误消息。单击“验证”按钮似乎总能修复验证显示方式中的任何错误。这只是此设置中问题的一个示例。这似乎发生在IE和FF中

有什么想法吗

谢谢

---

德里克·亚当斯（Derek Adams）

这是onkeyup处理程序的问题，您可以通过

$('#first-form').validate({
    rules: {
        first: {
            required: true
        },
        second: {
            required: true
        },
        five: {
            required: true
        }
    },
    highlight: doHighlight,
    success: doSuccess,
    onkeyup: function(element) {
        this.element(element);
    }
});

---

演示：

它看起来像是验证程序中的一个错误，如果表单在此之前有效或输入是表单中的最后一个输入，则不会应用

keyup

验证

$('#first-form').validate({
    rules: {
        first: {
            required: true
        },
        second: {
            required: true
        },
        five: {
            required: true
        }
    },
    highlight: doHighlight,
    success: doSuccess,
    onkeyup: function(element) {
        this.element(element);
    }
});