Question

使用jQuery Validate插件，我有一个自定义方法，可以确保至少检查了三个复选框中的一个（按照this question）。

这样可以正常工作，除了选中其中一个复选框后，错误容器不会消失（即使错误消息确实消失且表单将成功提交）。错误容器仍然停留在'display：block'上，而不是恢复为'display：none'。

这是一个JSFiddle来演示这个（它是我的表单的简化版本）。如果选中三个复选框中的一个，即使没有错误消息，错误容器仍保留在原位。如果选中所有三个复选框，则错误消息容器将消失。所以我很感激任何关于如何在选中其中一个复选框之后使错误容器消失的想法，根据自定义方法，谢谢。

这是我的HTML：

<form class="my_form" method="post" action="#">

  <div class="error-container">
    <ul>
    </ul>
  </div><!--error-container-->

    <p><label>My checkbox 1</label>
    <input class="my_checkbox_group" id="my_checkbox_1"
    name="my_checkbox_1[]" type="checkbox" value="Yes" /></p>
    <p><label>My checkbox 2</label>
    <input class="my_checkbox_group" id="my_checkbox_2"
    name="my_checkbox_2[]" type="checkbox" value="Yes" /></p>
    <p><label>My checkbox 3</label>
    <input class="my_checkbox_group" id="my_checkbox_3"
        name="my_checkbox_3[]" type="checkbox" value="Yes" /></p>
    <input type="submit" value="Submit" />
</form>

这是我的CSS：

input.error { background: #fdf3f3; border: 1px solid #ff3333; color: #ff3333; }
.error-container    { background: #fdf3f3; border: 1px solid #ff3333; clear: both; display: none; overflow: auto; padding: 10px; }
.error-container ul { margin-bottom: 0; }
.error-container label { float: none; font-weight: normal!important; width: auto; }

这是我的JS：

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ // initialize the plugin
        errorContainer: ".error-container",
        errorLabelContainer: ".error-container ul",
        wrapper: "li",
        focusInvalid: false,
        ignore: "",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

Answer 1

~~将以下success callback function添加到.validate()选项中。~~

~~success: function() { $('.error-container').hide(); },~~

~~DEMO：http://jsfiddle.net/M2gp4/~~

BTW ：如果您要验证隐藏字段，ignore选项的正确格式不是ignore: ""。

应为ignore: []。

请参阅此答案：https://stackoverflow.com/a/8565769/594235

修改：

在您最初编写代码时，错误容器按预期工作，但仅在选中所有三个复选框时才会正常工作。

进一步说明，删除groups选项后可以更好地看到此问题。 In this new jsFiddle，您可以看到三条消息以及单击所有三个复选框时会发生什么。在您点击submit之前，该框仍然保留在有效表单上。在单击组中的所有复选框之前，插件未对此“组”进行验证测试。它非常像将所有三个复选框视为单个输入元素。

一种可能的解决方案是每次点击任何一个复选框时都使用the .valid() method强制进行验证测试。

$('.my_checkbox_group').on('click', function(){ $('.my_form').valid(); });

DEMO：http://jsfiddle.net/M2gp4/3/

自定义方法成功验证后，jQuery验证错误容器不会消失

1 个答案: