Bootstrap 5 表单未勾选任何 checkbox 时如何阻止提交并显示提示？

2026-11-04数据小陈

可以用 JavaScript 判断这组 checkbox 中是否至少选中一项，再通过 setCustomValidity() 将校验结果接入现有的 form.checkValidity()。提示框根据校验结果单独显示或隐藏。

为什么给 fieldset 添加 required 没有效果？

fieldset 用于组织表单控件，不能用 required 要求组内至少选择一项。

checkbox 的 required 只约束单个控件。给三个 checkbox 都加上 required，就会要求三个全部选中；即使它们的 name 相同，也不会形成“至少选一个”的原生校验规则。

原结构中的 invalid-tooltip 位于三个 .input-group 外面，不能仅靠添加 was-validated 自动显示组级错误，需要单独控制。

调整表单和提示框

给现有表单、checkbox 分组和提示框添加标识。在下面的注释位置保留原来的三个 .input-group，其中的 checkbox 和 label 无需改动：

<form id="checkbox-form" class="needs-validation" novalidate>
  <fieldset
    id="checkbox-group"
    class="mb-5 position-relative"
    aria-describedby="checkbox-error"
  >
    <legend class="h4">Question?</legend>

    <!-- 此处保留原来的三个 .input-group -->

    <div id="checkbox-error" class="invalid-tooltip">
      请至少选择一个选项。
    </div>
  </fieldset>

  <button class="btn btn-primary" type="submit">提交</button>
</form>

novalidate 让提交动作交给下面的脚本处理，避免浏览器提前拦截提交，导致 submit 处理函数没有执行。它不会禁用手动调用的 checkValidity()。

position-relative 为绝对定位的 invalid-tooltip 提供定位参照。

替换原来的提交校验脚本

将下面的脚本放在表单 HTML 后面，替换原来的校验脚本：

(function () {
  'use strict';

  var form = document.getElementById('checkbox-form');
  var group = document.getElementById('checkbox-group');
  var feedback = document.getElementById('checkbox-error');
  var firstCheckbox = group.querySelector('input[type="checkbox"]');

  function updateGroupValidity() {
    var hasChecked =
      group.querySelector('input[type="checkbox"]:checked') !== null;

    // 将组级校验结果挂到一个可参与约束校验的控件上。
    firstCheckbox.setCustomValidity(
      hasChecked ? '' : '请至少选择一个选项。'
    );

    // 首次提交后才显示错误；选中任意一项后立即隐藏。
    feedback.classList.toggle(
      'd-block',
      form.classList.contains('was-validated') && !hasChecked
    );
  }

  updateGroupValidity();

  group.addEventListener('change', updateGroupValidity);

  form.addEventListener('submit', function (event) {
    form.classList.add('was-validated');
    updateGroupValidity();

    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
  });
})();

没有选中项时，第一个 checkbox 会带有自定义错误，使 form.checkValidity() 返回 false。选中任意一项后，setCustomValidity('') 会清除该错误。表单能否提交还取决于其他控件是否有效。

使用时需要注意什么？

不要再给这三个 checkbox 添加 required，否则会叠加单个控件必须勾选的规则。
示例通过 Bootstrap 的 d-block 显示提示框。错误清除时移除该类，恢复 invalid-tooltip 默认隐藏的状态。
示例将组级错误挂在第一个 checkbox 上，因此它可能显示无效样式。这不代表必须选择第一项，选择任何一项都能清除错误。
原代码中的 checkbox 没有 name，且 value 为空。如果后端需要接收选择结果，还应设置合适的 name 和不同的 value，并在服务端再次校验。