Bootstrap 4 radio validation

Question

I need a little help with form validation with Radio element in a page that use Bootstrap 4.

I need to add the error message below the radio element:

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

And I have the following code inside my form:

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

If I add the invalid-feedback inside the form-check element I see the error message below the single element, if I put it outside the form-check element the error message doesn't appear.

What is the right way to do that?

Answer 1

Not sure if it is the best way of doing this... But I wrapped my inline radio buttons in a div with a class of "form-control" and then added the "is-invalid" class when required... It results in the radio buttons having a red border box when invalid. but it works...

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

Answer 2

The way I worked around this was to put the invalid-feedback div inside the last form-check, then used margins to line up the div the way I wanted.

Inline:

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

Non-inline:

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

You can still put it outside the form-check div using a hidden radio button.

If none of the two visible radio buttons are checked, the error message will show

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