Bootstrap 4 无线电验证

Question

我需要在使用 Bootstrap 4 的页面中使用 Radio 元素进行表单验证的一些帮助。

我需要在无线电元素下方添加错误消息：

<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元素外部，则不会出现错误消息。

这样做的正确方法是什么？

Answer 1

我解决这个问题的方法是将invalid-feedbackdiv 放在最后一个表单检查中，然后使用边距按照我想要的方式排列 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>

Answer 2

不确定这是否是最好的方法...但我将内联单选按钮包装在带有“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>