验证 Bootstrap 5.1 中的内联单选按钮

Question

我有一个需要验证的表单，并且适用于文本和文本区域，但不适用于内联单选按钮。

<form class="needs-validation" novalidate method="POST">
<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" required>
  <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" required>
  <label class="form-check-label" for="inlineRadio3">3</label>
</div>
<div class="invalid-feedback">
    Radio button is required.
</div>
<button class="btn btn-primary" type="submit">Validate</button>
</form>

我看到提交时控件和标签变成红色，但无效反馈中的文本不存在。我还希望它一直向左对齐。

Answer 1

将此 CSS 类添加到您的文档中：

.was-validated :invalid~.invalid-feedback {
  display: inline;
}

通过这种方式，您可以覆盖提交表单后应用于

display: block

的

invalid-feedback

，并且验证消息将内联显示，与其余内联对象对齐。