0

I am seeing inconsistent validation messages when creating an application using KendoUI, jquery validation plugin, and bootstrap. Depending on the order things are filled in, the fields may or may not be validated.

The example contains two tabs, each with its own form. Each form has a couple of fields that are validated via jquery validation. The highlight and success handlers in the validation setup are used to change the colors of fields/labels when validation succeeds/fails. There is also a validate button that manually executes the valid() method on each form and shows an alert with the results.

Here is the 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>

and 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');
    }

Take a look at the running code in this jsfiddle:

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

To see an example of the problem I run into. Click field1 and type a word, then click field2 and type a word. Click back to field1 and erase the word, then click on field2 and erase the word. The top field does not show an error message while the bottom does. Clicking the Validate button seems to always fix any errors in the way validation is displayed. This is just one example of a problem in this setup. It seems to happen in both IE and FF.

Any ideas?

Thanks,

Derek Adams

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 に答える