首页 > 解决方案 > 在 Bootstrap 5.1 中验证内联单选按钮

问题描述

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

<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>

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

标签: formstwitter-bootstrapvalidationbootstrap-5

解决方案


推荐阅读