Question

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

我在表单中有一个复选框数组（让我们说它叫做music_ideas），它有三个选项rock，pop和jazz。我启动了检查所有选项的页面，我有一个jQuery规则用于验证，如下所示：

＆＃39; #music_ideas＆＃39;：{ 要求：真实，最小长度：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;
        }

Answer 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/

注意：您也可以致电$("#test_form").valid()上的$(document).ready()立即显示该复选框。

复选框的jQuery动态表单验证

1 个答案: