0

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

该示例包含两个选项卡，每个选项卡都有自己的表单。每个表单都有几个通过 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 中。

有任何想法吗？

谢谢，

德里克·亚当斯

4

1 回答 1

0

这是onkeyup处理程序的问题，您可以通过以下方式修复它

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

演示：小提琴

于 2013-07-25T02:59:48.933 回答