Question

我有一个包含许多复选框的表单（对于使用自己的规则来说太多了），我需要使用jQuery Validation Plugin来确保至少选中其中一个复选框。他们都有不同的名字，所以到目前为止我用Googling找到的大多数解决方案都不适合我。

但是，我遇到了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+），这对我来说没有多大意义。 / p>

我唯一的问题是我不知道如何将它连接到我的验证调用中，因为我在页面上没有“单个”元素来绑定它（因为，我所有的其他验证规则都是绑定到一个特定的单个元素，而我上面的扩展方法 - 实质上 - 绑定到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 Validation Plugin），如果我的扩展方法在提交之前返回true。我该如何添加？

Answer 1

我不知道您的公式如何以及您希望错误消息的位置，但您是否尝试过添加自定义验证方法？

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

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

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

如果选中至少一个复选框，则此一个复选框将有效，否则无效。

Answer 2

迈克尔克的解决方案挽救了我的生命。

我刚刚将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

使用jQuery submit()函数来阻止在验证之前发送形式。

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表达式的任何代码都不能保证正常工作。必须以某种方式使用参数'element'，否则将查询整个页面的任何/所有复选框。

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

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

Answer 6

我有一个用例，其中的复选框具有不同的name属性，没有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选项仅显示一次错误消息。

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

6 个答案: