Question

jquery验证有问题。我有两个复选框...仅在第二个我要求检查。

验证有效，但有两个问题：

1 - 如果出现错误（未选中第二个框），它会从第一个框中删除<span>，这与它完全无关......但仍显示第二个错误消息。< / p>

2 - 当第二个出现错误时...检查它不会删除错误消息。此外，多次检查和取消选中会导致在每次“取消选中”时显示多条错误消息。

html：

<form id="downloadInstall" method="post" action="/process/p_module_dl.php">
    <div class="row">
        <div class="col-md-12 margin-bottom-30 form-group">
            <p class="f-15 margin-bottom-15"><b>Select your options :</b></p>
            <div class="checkbox-list">
                <label
                    <input type="checkbox" name="settings[confirm]" value="1"/>
                    <span>Require confirmation during installation?</span>
                </label>
                <span class="help-block">Notifies user software will be installed and requires confirmation before it is installed.span>
            </div>
        </div>
        <div class="col-md-12 margin-bottom-50 form-group">
            <div class="checkbox-list">
                <label for="vdownload-terms">
                    <input id="vdownload-terms" type="checkbox" name="settings[terms]" value="1"/>
                    <span>I agree to the <a data-window="external" href="/terms.php">Terms and Conditions</a>.</span>
                </label>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 margin-bottom-50 form-group">
            <button class="btn btn-primary" type="submit"><i class="fa fa-download"></i> Download</button>
        </div>
    </div>

</form>

js：

$('#downloadInstall').validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    rules: {
        'settings[terms]': {
            required: true
        }
    },

    messages: {
        'settings[terms]': {
            required: "You must agree to the Terms and Conditions before downloading."
        }
    },

    highlight: function (element) { // hightlight error inputs
        $(element)
            .closest('.form-group').addClass('has-error');
    },

    unhighlight: function (element) { // un-hightlight error inputs
        $(element)
            .closest('.form-group').removeClass('has-error'); 
    },

    errorPlacement: function (error, element) {
        error.insertAfter(element.closest('.checkbox-list'));
    },

    submitHandler: function(form) {
        // do other things for a valid form
        form.submit();
    }

});

更新：

在第二个问题的情况下。选中并取消选中该复选框会导致has-error被添加/删除到此容器，但它不会删除<span>错误消息 - 它会添加另一个错误消息。唯一发生的事情是所有错误消息的颜色在出现错误类时从红色变为灰色，这只是一种css样式。

<div class="col-md-12 margin-bottom-50 form-group has-error">
    <div class="checkbox-list">
        <label for="vdownload-terms">
            <div id="uniform-vdownload-terms" class="checker">
                <span class="">
                    <input id="vdownload-terms" type="checkbox" value="1" name="settings[terms]" aria-required="true" aria-describedby="settings[terms]-error settings[terms]-error settings[terms]-error settings[terms]-error" aria-invalid="true">
                </span>
            </div>
            <span>I agree to the <a href="/terms.php" data-window="external">Terms and Conditions</a>.</span>
        </label>
    </div>
    <span id="settings[terms]-error" class="help-block">You must agree to the Terms and Conditions before downloading.</span>
    <span id="settings[terms]-error" class="help-block">You must agree to the Terms and Conditions before downloading.</span>
    <span id="settings[terms]-error" class="help-block">You must agree to the Terms and Conditions before downloading.</span>
    <span id="settings[terms]-error" class="help-block">You must agree to the Terms and Conditions before downloading.</span>
</div>

直到现在我才注意到的一件事是id被修改并且似乎是由于使用了统一插件。 uniform js

Answer 1

我能够通过上面的一些帮助/建议来解决这个问题......

//errorElement: 'span', //default input error message container
errorClass: 'help-block f-13', // default input error message class
focusInvalid: false, // do not focus the last invalid input

其他一切都是一样的。我注释掉使用span作为errorElement ...这默认为标签中显示的错误消息，这也消除了我遇到的所有问题。我在我的errorClass中添加了f-13类，它只是将字体设置为13px（因为消息现在在标签中，我的标签的字体大小更大）。

最终结果看起来和行为完全一样减去问题。

带有复选框的jquery验证问题

1 个答案: