Question

在使用KendoUI，jquery验证插件和bootstrap创建应用程序时，我看到了不一致的验证消息。根据订单填写的内容，可能会或可能不会验证字段。

该示例包含两个选项卡，每个选项卡都有自己的表单。每个表单都有一些通过jquery验证验证的字段。验证设置中的突出显示和成功处理程序用于在验证成功/失败时更改字段/标签的颜色。还有一个验证按钮，可以在每个表单上手动执行 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>

和Javascript：

    /** Create the tab strip */
    $("#tabs").kendoTabStrip({
        animation: false
    });

    /** Validation for main form */
    $('#first-form').validate({
        rules: {
            first: {
                required: true
            },
            second: {
                required: true
            },
        },
        highlight: doHighlight,
        success: doSuccess
    });

    /** Validation for GeoServer form */
    $('#second-form').validate({
        rules: {
            third: {
                required: true
            },
            fourth: {
                required: true
            },
        },
        highlight: doHighlight,
        success: doSuccess
    });

    $('#dialog-submit').click(function(event) {
        event.preventDefault();
        var firstValid = $('#first-form').valid();
        var secondValid = $('#second-form').valid();
        alert("First: " + firstValid + " Second: " + secondValid);
    });

    /** Handle highlighting errors */
    function doHighlight(element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    }

    /** Handle showing successful validation */
    function doSuccess(element) {
        element.addClass('valid').closest('.control-group').removeClass('error').addClass('success');
    }

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

http://jsfiddle.net/derekadams/t9qXb/9/

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

有什么想法吗？

谢谢，

Derek Adams

Answer 1

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

修复它

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

演示：Fiddle

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

1 个答案: