javascript - 使用 CSS 类进行验证时，jQuery 验证器不适用于复选框列表

Question

我有一些像这样的复选框:

<input class="mandatory" name="Notes8~1" id="Notes8~1" type="checkbox" value="Yes">Option 1<br>
<input class="mandatory" name="Notes8~2" id="Notes8~2" type="checkbox" value="Yes">Option 2<br>
<input class="mandatory" name="Notes8~3" id="Notes8~3" type="checkbox" value="Yes">Option 3<br>

(是的，我知道 <input> 标签没有关闭，也许我需要修复它!)

我想要求用户至少检查其中之一。所以我有这个 JavaScript:

jQuery.ready({function() {jQuery.validator.addClassRules('mandatory', {required: true});}});

向复选框添加验证。但这是行不通的；从单步执行代码来看，验证代码似乎已执行，但即使所有复选框均为空白，它也会以某种方式通过。我如何要求用户至少选中一个框？我可以通过给它们起相同的名字来做到这一点Notes8但这在此应用程序中不起作用，因为其他代码依赖于它们具有唯一的名称。

Answer 1

排列一组复选框(或单选输入)的常见方法是使用name=*[]。
将规则分配给 "Notes8[]" 属性选择器并使用 minlength: 1 属性:

jQuery(function($) { // DOM ready and $ alias in scope

  $("#myForm").validate({
    rules: {
      "Notes8[]": {
        required: true,
        minlength: 1
      }
    },
    messages: {
      "Notes8[]": "Select at least one"
    }
  });

});

<form id="myForm">
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_1_yes"> Option 1
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_2_yes"> Option 2
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_3_yes"> Option 3
  </label>

  <button type="submit">SEND</button>
</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

感谢:https://stackoverflow.com/a/4120320/383904

多个复选框的自定义验证器

如果您想构建自定义验证器，这应该可以帮助您:

jQuery(function($) { // DOM ready and $ alias in scope

  function validateMultiple (selector, n, isExactlyN) {
    const totChecked = $(selector).filter(':checked').length;
    return !(isExactlyN ? totChecked == n : totChecked >= n);
  }
  

  $('#myForm').on('submit', function(ev) {
    if (validateMultiple('.Notes8_group', 1)) {
      ev.preventDefault();
      alert("Select at least one"); // Your custom error here
    }
  });

});

<form id="myForm">
  <label>
    <input class="mandatory Notes8_group" name="Notes8~1" type="checkbox" value="n8_1_yes"> Option 1
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8~2" type="checkbox" value="n8_2_yes"> Option 2
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8~3" type="checkbox" value="n8_3_yes"> Option 3
  </label>

  <button type="submit">SEND</button>
</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

您可以使用如下功能:

示例 1:至少一个:

validateMultiple('.Notes8_group', 1)

示例 2:恰好两个:

validateMultiple('.Notes8_group', 2, true)

额外提示:如果您无法(由于某种原因)分配组类，您可以使用属性选择器[]:

validateMultiple('[name^="Notes8~"]', 1)

它将定位所有以 "Notes8~" 开头的 name，因此所有 name= Notes8~1、Notes8~2 和 Notes8~3 元素。