jQuery：验证是否选择了多个复选框之一（不同的名称，使用 jQuery 验证插件）

Question

我有一个包含许多复选框的表单（太多复选框，无法使用它们自己的规则），我需要使用jQuery Validation Plugin 来确保至少选择其中一个。它们都有不同的名称，所以到目前为止我通过谷歌搜索找到的大多数解决方案都不适合我。

但是，我遇到了this 帖子，我对其进行了一些调整以制作此扩展方法：

// method for checking out checkboxes for the form validation
$.validator.methods.checkboxes_checked = function(value,element,param) {
   return ($('#signup #checkboxes input[type=checkbox]:checked').length > 0);
}

... 返回 true 或 false 取决于是否选择了任何复选框。我不想逐字使用上述帖子中的方法，因为这需要为每个复选框制定单独的规则，而且我有很多规则（20+），这对我来说没有多大意义。

我唯一的问题是我不知道如何将它连接到我的验证调用中，因为我在页面上也没有一个“单一”元素来绑定它（例如，我的所有其他验证规则都是绑定到特定的单个元素，而我上面的扩展方法将 - 本质上 - 绑定到 20 多个元素）。这是我的验证调用现在的样子：

// validate the form
$('#signup').validate({
   rules: {
      'bedrooms': { required: true },
      'maxrent': { required: true },
      'term': { required: true },
      'movedate': { required: true },
      'firstname': { required: true, minlength: 2 },
      'lastname': { required: true, minlength: 1, maxlength: 1 },
      'email': { required: true, email: true },
      'day_telephone': { required: true, digits: true, minlength: 10, maxlength: 10 }
   },
   errorPlacement: function(error, element) { error.css('display','none'); },
   highlight: function(element, errorClass) { 
      $(element).fadeOut(function() { $(element).fadeIn(); });
      $('label[for='+$(element).attr('name')+']').css('color','red');
   },
   unhighlight: function(element, errorClass) { $('label[for='+$(element).attr('name')+']').css('color','black'); },
   onkeyup: false
});

基本上，我希望表单本身在提交之前检查（使用 jQuery 验证插件）我的扩展方法是否返回 true。这个怎么添加？

Answer 1

我不知道您的公式看起来如何以及您希望在哪里显示错误消息，但您是否尝试过添加自定义验证方法？

$.validator.addMethod("checkboxes", function(value, element) {
    return $('input[type=checkbox]:checked').length > 0;
}

然后将其添加为您的一个复选框的规则：

rules: {
    'idofacheckbox' : { checkboxes: true }
}

如果至少有一个复选框被选中，则该复选框将有效，如果没有选中则无效。

Answer 2

Michaelk 的解决方案救了我的命。

我刚刚将 checkbox_1 类分配给我想要验证的复选框。 稍微改变一下addMethod。

$.validator.addMethod("checkbox_1", function(value, element) {
return $('.checkbox_1:checked').length > 0;

}

将所有复选框的错误与所分配的类分组：

groups: {
   checkbox_1: "checbox1 checkbox2 checkbox3"

}

将规则应用到第一个复选框作为 michalek

rules: {
'idofacheckbox' : { checkbox_1: true }

}

就是这样。效果很好，所有正在验证的复选框只出现一个错误。

Answer 3

使用jQuerysubmit()函数防止表单在被验证之前被发送。

Answer 4

$('#myform').submit(
    function(){
        //  check the checkboxes
        if (okay_to_submit)
            forms['myform'].submit();
    }
);

Answer 5

$.validator.addMethod("checkboxes", function(value, element) {
  return $('input[type=checkbox]:checked').length > 0;
}

不保证任何使用通用 jQuery 表达式的代码都能正常工作。必须以某种方式使用参数“元素”，否则将查询整个页面的任何/所有复选框。

我认为需要逻辑来根据提供的元素识别组中的其他元素。

也许最好的选择是动态创建“组”属性，然后将其传递给验证器方法。 例如， 在您的输入上使用类，例如"atLeastOne-checkboxes group_1"，验证器回调必须是function(value, element, (Array) elements_in_group) {}

Answer 6

我有一个用例，其中复选框有不同的name attr，没有 ID 和类，我无法更改标记。我的规则是：

...
rules: {
  'preferred_contact_method[Email]': {
    checkone: true,
  },
  'preferred_contact_method[Phone]': {
    checkone: true,
  },
  'preferred_contact_method[Mail]': {
    checkone: true,
  },
},
...

然后我的自定义验证器在 dom 树上查找复选框的包装，如果有任何被选中，则简单地返回。

$.validator.addMethod('checkone', function(value, element) {
  const boxes = $(element).closest('.js-webform-checkboxes');
  return boxes.find('input:checked').length;
}, 'Please select one.');

另外，使用groups 选项只显示一次错误消息。