Question

我正在使用jQuery表单验证器插件。表单有5个复选框。第一个（主）如果选中，则检查剩余的4并使用户不能改变它们。如果未选中master，则剩余的4个框将返回到用户可切换的状态。此功能正常。现在，我想要做的是，如果所有复选框都未选中，则表单无效。我还想要一个特定区域（checkBoxErrorHolder）来存放复选框的验证错误消息。其他错误消息应通过其输入显示在其默认位置。这就是我到目前为止所拥有的：

<script language="javascript">
$(function() {
    $.validator.addMethod("validateCheckBoxes",
                          function (value, element, params)   {

                              var master=false, 
                                  slave1=false, 
                                  slave2=false,
                                  slave3=false,
                                  slave4=false;

                              if ($("#master").attr("checked"))
                                  master = true;
                              if ($("#slave1").attr("checked"))
                                  slave1 = true;
                              if ($("#slave2").attr("checked"))
                                  slave2 = true;
                              if ($("#slave3").attr("checked"))
                                  slave3 = true;
                              if ($("#slave4").attr("checked"))
                                  slave4 = true;

                              return (master || (slave1&&slave2&&slave3&&slave4));
                          }, 
                          "One or more check boxes must be checked");

    $("#theForm").validate({
        rules: { 
                   first: required,
                   last:  required,
                   email: {required: true, email: true},
                   master: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave1: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave2: { required: true,
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave3: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave4: { required: true, 
                             validateCheckBoxes: true,
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
               },
        messages: {
            first: "required",
            last: "required",
            email: {
                       required: "Email address required",
                       email: "Please supply a valid email address"
                   }
        }
    });
});
</script>

<form id="theForm" ...>
<input type="text" name="first" value="" />
<input type="text" name="last" value="" />
<input type="text" name="email" value="" />
<input type="checkbox" id="master" value="master" class="validateCheckBoxes"/>
<input type="checkbox" id="slave1" value="slave1" class="validateCheckBoxes"/>
<input type="checkbox" id="slave2" value="slave2" class="validateCheckBoxes"/>
<input type="checkbox" id="slave3" value="slave3" class="validateCheckBoxes"/>
<input type="checkbox" id="slave4" value="slave4" class="validateCheckBoxes"/>
<input type="submit" />
</form>
<div id="checkBoxErrorHolder"></div>

毋庸置疑，我没有得到我期望的结果。

Answer 1

您的代码：

rules: { 
               first: required,
               last:  required,
               email: {required: true, email: true},
               master: { required: true, 
                         validateCheckBoxes: true},
                         errorPlacement: function(error, element) {
                                             $("#checkBoxErrorHolder").html(error);
                                         }
                       } // <-- missing comma
               slave1: { required: true, 
                         validateCheckBoxes: true},
                         errorPlacement: function(error, element) {
                                             $("#checkBoxErrorHolder").html(error);
                                         }
                       } // <-- missing comma

基本上，您通过各种语法和格式错误打破了插件......

1） errorPlacement 非规则您与其他规则一起应用。 It's a callback function that you apply once along with the other options ...

$(document).ready(function () {

    $("#theForm").validate({
        rules: {
            // your rules
        },
        messages: {
            // your messages
        },
        errorPlacement: function (error, element) {
            $("#checkBoxErrorHolder ").html(error);
        },
        // other options and callback functions,
    });

});

2）您的checkbox元素缺少name属性。每个输入，选择，广播，复选框等，除了提交按钮，必须具有name属性才能使此插件正常运行。

3）每当您对required这样的规则使用速记时，都必须使用引号。这是一个正确显示两种方式的例子......

rules: {
    first: "required",
    last: {
        required: true
    },
},

4）我开始为这个~~构建一个jsFiddle，但我停止了，因为语法错误太多了，而不是我修复~~。 ~~请通过jsFiddle的jsHint函数运行您的JavaScript以查看它们。~~我的基本验证工作~~所以现在您可以解决自定义validateCheckBoxes方法~~。

以下是基本表单的有效jsFiddle演示： http://jsfiddle.net/gHKyb/

5）编辑：我再次查看了您的自定义validateCheckBoxes方法，并清除了最后一个语法错误。但它仍然无法正常工作，因为您不小心在每个复选框上定义了required规则，这意味着除了之外总是需要复选框。

我从所有复选框中删除了required规则，现在一切似乎都符合您的规范。我也压缩了你的代码。（必须检查第一个框或必须检查最后四个框）

$.validator.addMethod("validateCheckBoxes", function (value, element, params) { var master, slave = []; if ($("#master").attr("checked")) { master = true; } $("[id^='slave']").each(function(i) { if ($(this).attr("checked")) { slave[i+1] = true; } }); return (master || (slave[1] && slave[2] && slave[3] && slave[4])); }, "One or more check boxes must be checked");

6）最后，为了修复错误标签的位置，我只是修改了errorPlacement回调函数，如下所示：

errorPlacement: function (error, element) { if ($(element).attr("type") === "checkbox") { $("#checkBoxErrorHolder").html(error); // just for checkboxes } else { error.insertAfter(element); // default placement } }, success: function() { // need "success" to dynamically clear any checkbox errors $("#checkBoxErrorHolder").html(); },

工作演示：http://jsfiddle.net/AKgmH/

Answer 2

似乎“每次'检查'后都会丢失

if ($("#master").attr("checked"))
  master = true;
if ($("#slave1").attr("checked"))
  slave1 = true;
if ($("#slave2").attr("checked"))
  slave2 = true;
if ($("#slave3").attr("checked"))
  slave3 = true;
if ($("#slave4").attr("checked"))
  slave4 = true;

我不知道它是否能解决您的问题，但它可以帮助：）

使用jQuery Validator验证复选框状态

2 个答案: