复选框的jQuery动态表单验证答案

【问题标题】：jQuery dynamic form validation for checkboxes复选框的jQuery动态表单验证
【发布时间】：2014-04-27 11:36:45
【问题描述】：

我有一个包含多个字段的表单，我正在使用来自 jqueryvalidation.org 的 JQuery 插件进行验证。除了一个问题外，一切都很好。

我有一个表单中的复选框数组（假设它称为music_ideas），它具有摇滚、流行和爵士三个选项。我开始页面时检查了所有选项，并且我有一个用于验证的 jQuery 规则，如下所示：

'#music_ideas'：{ 要求：真，最小长度：2 }

问题如下：当信息有效时，我有一个图标（复选标记）。当您单击提交时，信息是有效的，所以它出现了，一切都很好。如果我取消选中其中两个复选框，我希望复选标记会消失并由红十字代替以指示错误。直到您再次提交表单，然后（在提交之后）动态验证工作正常（即，只要您选中/取消选中复选框，表单就会被验证）才会发生这种情况。

关于我可能在哪里出错的任何想法？

问候，乔治

编辑：请在下面找到一个最小的工作示例：

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="example.css">
  <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="jquery.validate.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $('#test_form').validate({
    success:"valid",
        rules: {
            'music_prefs[]': {
                required:true,
                minlength:2
                }
            },

        messages: {
            "music_prefs[]": {
                required: " You need to select a music idea",
                minlength: " You need to select at least two music ideas"
                }
            },
        errorPlacement: function(error, element) {
            if (element.attr("name") == 'music_prefs[]') {
                    element.parent().append(error);
                }
            else {
                error.insertAfter(element);
                }
        },
        });


        });
 </script>
</head>

<body>
<form id="test_form" action="#" method="post">
<div class="music_ideas"><label for="mi">Music Ideas:</label>
<input type="checkbox" name="music_prefs[]" id="mp1" checked value="Rock">Rock
<input type="checkbox" name="music_prefs[]" id="mp2" checked value="Pop">Pop
<input type="checkbox" name="music_prefs[]" id="mp3" checked value="Jazz">Jazz</div>
<input type="submit" name="btn_submit" value="Submit the form" id="bs">
<input type="reset" name="btn_reset" value="Clear Fields" id="br">
</form>
                </body>

</html>

CSS 文件中的相关行是：

label.error {
    background: url('unchecked.gif') no-repeat;
}
label.error.valid {
    background: url('checked.gif') no-repeat;
        }

【问题讨论】：

您必须发布更多代码。具体来说，你在哪里打电话给validate()，你传递了什么选项？我们可以看到您的 HTML 标记吗？
谢谢詹姆斯，我编辑了原始帖子以包含您请求的代码。

标签： jquery validation checkbox

【解决方案1】：

我认为这里的问题是当用户提交表单时，JQuery Validation 看到用户输入是正确的，并停止尝试验证表单。

但是，您可以通过调用 $("#test_form").valid() 再次强制验证。

在这种情况下，我们要在用户每次选中复选框时检查表单是否有效：

$("#test_form input[type='checkbox']").change(function() {
    $("#test_form").valid();
});

JSFiddle 1： http://jsfiddle.net/qW3az/

或者，如果您只想在用户第一次尝试提交表单后显示复选框：

$("#test_form").submit(function(e) {
    e.preventDefault();
    $("#test_form input[type='checkbox']").change(function() {
        $("#test_form").valid();
    });
});

JSFiddle 2： http://jsfiddle.net/Ydz5J/

注意：您也可以在$(document).ready() 上调用$("#test_form").valid() 以立即显示复选框。

【讨论】：

超级好，我会试试的。尽管验证对所有表单元素都动态工作并且只省略了复选框，但这是默认行为吗（让我感到震惊的是，我必须在一切重新开始正常工作之前重新提交表单）？
默认行为似乎适用于复选框，但是 success: "valid" 选项的行为与您的预期不同。如果表单在您第一次提交时无效，它将监控并响应您修复它的尝试。但是由于某种原因，如果复选框在您第一次提交表单时有效，它会添加“有效”类并停止监视它们。我同意你的观点，这似乎是一个奇怪的逻辑，所以你可能想将它作为一个错误报告给插件作者。