2

使用 jQuery Validate 插件，我有一个自定义方法，可确保至少三分之二的复选框已被选中（根据这个问题）。

这工作正常，除了一旦选中了其中一​​个复选框，错误容器不会消失（即使错误消息确实消失并且表单将成功提交）。错误容器仍然停留在“显示：块”而不是恢复为“显示：无”。

这是一个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
        }
    });

});
4

1 回答 1

3

将以下success回调函数添加到您的.validate()选项中。

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

演示：http: //jsfiddle.net/M2gp4/

顺便说一句：如果您想验证隐藏字段，该ignore选项的正确格式不是ignore: "".

应该是ignore: []。

看到这个答案： https ://stackoverflow.com/a/8565769/594235

编辑：

正如您最初编写代码时，错误容器按预期工作，但仅当所有三个复选框都被选中时。

更进一步，当groups删除该选项时，可以更好地看到这个问题。 在这个新的 jsFiddle中，您可以看到三个消息以及当您单击所有三个复选框时会发生什么。在您单击 之前，该框甚至仍保留在有效表单上submit。在单击组中的所有复选框之前，插件不会对此“组”进行验证测试。这很像将所有三个复选框视为单个输入元素。

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

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

演示：http: //jsfiddle.net/M2gp4/3/

于 2013-03-13T01:24:54.630 回答