使用 jQuery Validator 验证复选框状态

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;

我不知道它是否能解决你的问题，但它可以帮助:)