Bootstrap 5.1内联单选按钮验证异常（提示文本不显示）及左对齐需求处理

Let’s walk through why your radio button validation isn’t showing the feedback text, and fix the alignment issue at the same time:

The Key Problems #

1. Redundant required attributes: You added required to every radio button in the group—you only need it on one (since they share the same name, the browser treats them as a single selection group).
2. Misplaced feedback container: Bootstrap’s form validation expects the invalid-feedback element to be in the right context relative to the form controls. Right now it’s outside the radio group’s container, so the validation styles won’t trigger it to display.
3. Default alignment padding: Bootstrap’s invalid-feedback has built-in left padding that stops it from aligning fully left—we’ll adjust that with a quick CSS tweak.

Fixed Implementation #

First, here’s the updated HTML structure:

<form class="needs-validation" novalidate method="POST">
  <!-- Wrap radio group and feedback in a shared container -->
  <div class="radio-group-wrapper">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" required>
      <label class="form-check-label" for="inlineRadio1">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">3</label>
    </div>
    <!-- Feedback now lives inside the radio group container -->
    <div class="invalid-feedback radio-feedback">
      Radio button is required.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Validate</button>
</form>

Add this CSS to fix the alignment and ensure proper display:

.radio-group-wrapper {
  position: relative;
}

.radio-feedback {
  padding-left: 0; /* Remove default padding to align fully left */
  display: block; /* Guarantee visibility when validation fails */
}

Finally, include Bootstrap’s native validation script to trigger the validation state on submit:

(function () {
  'use strict'

  // Target all forms with validation enabled
  const forms = document.querySelectorAll('.needs-validation')

  // Prevent form submission and trigger validation styles
  Array.prototype.slice.call(forms)
    .forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
})()

Why This Works #

• The shared container for the radio group and feedback lets Bootstrap’s validation styles correctly target the feedback text when the group is invalid.
• Removing duplicate required attributes cleans up the markup while still enforcing the selection requirement.
• The CSS adjusts padding to fully left-align the feedback and ensures it displays as a block element when validation fails.

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