如何在Bootstrap 4 .btn-group-toggle中显示JavaScript验证错误

我完全懂你碰到的这个问题——用Bootstrap 4的按钮组做星级评分时，明明给radio加了required属性和.invalid-feedback提示，没选评分提交却看不到错误提示对吧？这是因为你的radio按钮被嵌套在.btn标签里了，Bootstrap默认的表单验证逻辑只针对带form-control类的元素，没法自动识别这种按钮组结构的必填项状态。

下面给你两种可行的解决方法：

方法一：自定义JavaScript处理表单提交验证 #

我们可以监听表单的提交事件，手动检查星级radio是否有选中，然后控制错误提示的显示/隐藏，同时给按钮组添加验证状态类，让用户能直观看到错误提示。

完整示例代码 #

<form id="ratingForm">
  <div class="form-group">
    <div class="btn-group btn-group-toggle" data-toggle="buttons" aria-label="Rate this">
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="1" required> 1
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="2" required> 2
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="3" required> 3
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="4" required> 4
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="5" required> 5
      </label>
    </div>
    <div class="invalid-feedback">
      Please rate the item in the scale of 5
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// 监听表单提交事件
document.getElementById('ratingForm').addEventListener('submit', function(e) {
  const ratingInputs = document.querySelectorAll('input[name="rating"]');
  const ratingGroup = document.querySelector('.btn-group-toggle');
  const errorFeedback = ratingGroup.nextElementSibling;
  let hasSelectedRating = false;

  // 检查是否有星级被选中
  ratingInputs.forEach(input => {
    if (input.checked) {
      hasSelectedRating = true;
    }
  });

  if (!hasSelectedRating) {
    e.preventDefault(); // 阻止表单提交
    // 显示错误状态和提示
    ratingGroup.classList.add('is-invalid');
    errorFeedback.style.display = 'block';
  } else {
    // 清除错误状态
    ratingGroup.classList.remove('is-invalid');
    errorFeedback.style.display = 'none';
  }
});

// 用户点击星级时自动清除错误提示
document.querySelectorAll('.btn-group-toggle .btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const ratingGroup = document.querySelector('.btn-group-toggle');
    const errorFeedback = ratingGroup.nextElementSibling;
    ratingGroup.classList.remove('is-invalid');
    errorFeedback.style.display = 'none';
  });
});
</script>

方法二：结合Bootstrap默认的was-validated类 #

Bootstrap提供了was-validated类，给表单添加这个类后会触发所有必填项的验证状态。我们可以在表单提交时结合这个类，同时手动处理按钮组的验证状态：

完整示例代码 #

<form class="needs-validation" novalidate>
  <div class="form-group">
    <div class="btn-group btn-group-toggle" data-toggle="buttons" aria-label="Rate this">
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="1" required> 1
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="2" required> 2
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="3" required> 3
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="4" required> 4
      </label>
      <label class="btn btn-dark btn-sm">
        <input type="radio" name="rating" value="5" required> 5
      </label>
    </div>
    <div class="invalid-feedback">
      Please rate the item in the scale of 5
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// 初始化Bootstrap表单验证
(function() {
  'use strict';
  window.addEventListener('load', function() {
    const forms = document.getElementsByClassName('needs-validation');
    Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        const ratingInputs = form.querySelectorAll('input[name="rating"]');
        let hasSelectedRating = false;
        
        ratingInputs.forEach(input => {
          if (input.checked) hasSelectedRating = true;
        });
        
        const ratingGroup = form.querySelector('.btn-group-toggle');
        const errorFeedback = ratingGroup.nextElementSibling;
        
        if (!hasSelectedRating) {
          event.preventDefault();
          event.stopPropagation();
          // 标记按钮组为错误状态
          ratingGroup.classList.add('is-invalid');
          errorFeedback.style.display = 'block';
        } else {
          ratingGroup.classList.remove('is-invalid');
          errorFeedback.style.display = 'none';
        }
        
        // 给表单添加验证触发类
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

// 点击星级时清除错误状态
document.querySelectorAll('.btn-group-toggle .btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const form = this.closest('form');
    const ratingGroup = form.querySelector('.btn-group-toggle');
    const errorFeedback = ratingGroup.nextElementSibling;
    ratingGroup.classList.remove('is-invalid');
    errorFeedback.style.display = 'none';
  });
});
</script>

关键说明 #

两种方法的核心逻辑都是：

1. 手动检查radio按钮的选中状态，因为Bootstrap默认验证不会识别嵌套在.btn里的radio
2. 通过添加/移除is-invalid类来标记按钮组的错误状态，同时控制.invalid-feedback的显示
3. 给星级点击事件添加清除错误状态的逻辑，提升用户体验

内容的提问来源于stack exchange，提问作者Mayeenul Islam