Bootstrap 4 单选框验证

Question

我需要在使用Bootstrap 4的页面中，对单选框进行表单验证，并在单选框下方显示错误信息。

<div class="invalid-feedback">Please choose an option</div>

我在表单中有以下代码：

          <section>
            <h6>Lorem Ipsum</h6>
            <p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
              <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
              <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
            </div>

          </section>

如果我将invalid-feedback添加到form-check元素内部，则会在单个元素下方看到错误消息；如果我将其放在form-check元素外部，则不会出现错误消息。

那么，应该如何正确操作呢？

- Zauker

---

也许这个文档可以帮助。 - Carl Binalla

在 Bootstrap 文档中有一个单选按钮的示例，但它们不是内联的。我的情况有点不同，我有 form-check-inline。 - Zauker

Answer 1

我解决这个问题的方法是将 invalid-feedback div 放在最后一个 form-check 内部，然后使用边距来对齐 div 以达到我想要的效果。 行内显示：

     <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: 1em">Please choose an option</div>
    </div>

非内联元素:

     <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: -1.25em">Please choose an option</div>
    </div>

- Kevin Tighe

Answer 2

您仍然可以使用隐藏的单选按钮将其放在form-check div之外。 如果两个可见单选按钮都未被选中，则会显示错误消息。

      <section>
        <h6>Lorem Ipsum</h6>
        <p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
        </div>
        <div>
           <input class="display-d" type="radio" name="agreeMarketProfiling" value="" required>
           <div class="invalid-feedback">Please choose an option</div>
        </div>
      </section>

- AmmarCSE

Answer 3

不确定这是否是最好的方法...但我将内联单选按钮包装在一个类为"form-control"的div中，然后在需要时添加"is-invalid"类...这会导致单选按钮在无效时具有红色边框框，但它能够正常工作...

<div class="form-group">
    <div class="<?php echo isset($errors['published'])?"form-control is-invalid":null;?>" >
        <div class="form-check form-check-inline ">
            <input type="radio" name="published" id="published1" value="1" class="form-check-input <?php echo isset($errors['published'])?"is-invalid":(isset($errors)?"is-valid":null);?>" <?php echo !isset($post['published'])||$post['published']==1?"checked":null;?>/>
            <label class="form-check-label" for="published1">Published</label>
        </div>

        <div class="form-check form-check-inline">
            <input type="radio" name="published" id="published2" value="0" class="form-check-input <?php echo isset($errors['published'])?"is-invalid":(isset($errors)?"is-valid":null);?>" <?php echo isset($post['published'])&&$post['published']==0?"checked":null;?>/>
            <label class="form-check-label" for="published2">Un-published</label>

        </div>
    </div>
    <div class="invalid-feedback"><?php echo isset($errors['published'])?$errors['published']:null;?></div>
</div>

- David dB

---

不确定这在Bootstrap 4/5中是否也适用。 - cdub