我的表单包含3 个复选框。

<fieldset class="mb-5">

    <legend class="h4">Question?</legend>

    <div class="input-group has-validation mb-3">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" id="flexCheckDefault1">
    </div>
    <label class="form-control" for="flexCheckDefault1">First</label>
    </div>

    <div class="input-group has-validation mb-3">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" id="flexCheckDefault2">
    </div>
    <label class="form-control" for="flexCheckDefault2">Second</label>
    </div>

    <div class="input-group has-validation mb-0">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" id="flexCheckDefault3">
    </div>
    <label class="form-control" for="flexCheckDefault3">Third</label>
    </div>

    <div class="invalid-tooltip">Please select at least one of the checkboxes.</div>

</fieldset>

(function () {
    'use strict';

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation');

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
        }
        form.classList.add('was-validated');
    }, false);
    });
})();

在提交表单时，如果没有任何一个复选框被选中，如何让 invalid-tooltip 显示？

我试着把 required 放进fieldset，但那没有用。还有其他更快捷/方便的做法吗？

解决方案

不幸的是，required 属性不支持在 <fieldset> 元素中使用。

你需要实现：

1. 从 <fieldset> 中提取 input[type="checkbox"] 元素。

2. 根据通过/失败的验证情况设置复选框和工具提示的可见性：

2.1.如果没有任何复选框被选中，则将所有复选框的 required 属性设为 true，并把 .invalid-tooltip 设置为 display: block（以显示工具提示）[验证失败]。

2.2.如果至少有一个复选框被选中，则将所有复选框的 required 属性设为 false，并把 .invalid-tooltip 设置为 display: none（以隐藏工具提示）[验证通过]。

Array.prototype.slice.call(forms).forEach(function (form) {
  const checkboxFieldset = form.querySelector('fieldset[name="question"]');
  const checkboxes = checkboxFieldset.querySelectorAll(
    'input[type="checkbox"]'
  );
  const checkboxTooltip = checkboxFieldset.querySelector('.invalid-tooltip');

  form.addEventListener(
    'submit',
    function (event) {
      const isChecked = Array.from(checkboxes).some((x) => x.checked);

      if (!isChecked) {
        checkboxes.forEach((input) => (input.required = true));
        checkboxTooltip.style.display = 'block';
      } else {
        checkboxes.forEach((input) => (input.required = false));
        checkboxTooltip.style.display = 'none';
      }

      // Form validation before submit
      const isValidForm = form.checkValidity();
      if (!isValidForm) {
        event.preventDefault();
        event.stopPropagation();
      }

      form.classList.add('was-validated');

    },
    false
  );
});

并且需要将 name="question" 属性添加到 <fieldset>。

<fieldset class="mb-5" name="question">
  <legend class="h4">Question?</legend>

  <div class="input-group has-validation mb-3">
    <div class="input-group-text">
      <input
        class="form-check-input mt-0"
        type="checkbox"
        value=""
        id="flexCheckDefault1"
      />
    </div>
    <label class="form-control" for="flexCheckDefault1">First</label>
  </div>

  <div class="input-group has-validation mb-3">
    <div class="input-group-text">
      <input
        class="form-check-input mt-0"
        type="checkbox"
        value=""
        id="flexCheckDefault2"
      />
    </div>
    <label class="form-control" for="flexCheckDefault2">Second</label>
  </div>

  <div class="input-group has-validation mb-0">
    <div class="input-group-text">
      <input
        class="form-check-input mt-0"
        type="checkbox"
        value=""
        id="flexCheckDefault3"
      />
    </div>
    <label class="form-control" for="flexCheckDefault3">Third</label>
  </div>

  <div class="invalid-tooltip">
    Please select at least one of the checkboxes.
  </div>
</fieldset>

旁注：提示框可能无法在 <fieldset> 元素附近正确放置（原因是 position: absolute）。你可以查找 invalid-feedback 类，并在HTML与 JS中同时替换 invalid-tooltip。

演示 @ StackBlitz