Display invalid-feedback text for radio button group in Bootstrap 4

Question

I am trying to set up a Bootstrap 4 form that will display error text as per the custom styles section of the Bootstrap 4 form page. I have used part of their own form verbatim and then added a radio group, but the error text for the radio group ("Please select an option.") is not being displayed when you try to submit the form.

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  }, false);
})();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>




<form class="container" id="needs-validation" novalidate>
  <div class="row">
     <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-radio">
         <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Toggle this custom radio</span>
       </label>
       <label class="custom-control custom-radio">
         <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Or toggle this other custom radio</span>
       </label>
      <div class="invalid-feedback">
        Please select an option.
      </div>
     </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Answer 1

I struggled with this for a while to get the invalid-feedback message to be displayed correctly in Bootstrap 5 so just in case it helps anyone...

• Radio buttons should be inside an .input-group

• The .invalid-feedback message should be immediately after the .input-group (at the same level, not inside it)

• The .is-invalid class should be applied to the .input-group to make the message appear (If you want the actual inputs to appear red etc, then you can ALSO apply .is-invalid to them too)

The following code example worked for me when I (programatically) added .is-invalid to the .input-group

<div class="input-group">
    <div class="form-check form-check-inline">
        <label class="form-label me-5">
            <input type="radio" class="form-check-input" name="ftb" value="1"/>
            Yes 
        </label>
    </div>

    <div class="form-check form-check-inline">
        <label class="form-label">
            <input type="radio" class="form-check-input" name="ftb" value="0"/>No
        </label>
    </div>
</div>

Answer 2

I came up with this solution

.invalid-feedback-polyfill {
  display: block !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
  font-size: 80% !important;
  color: #dc3545 !important;
}

Answer 3

This can be done without additional JS in Bootstrap 4:

1. Wrap the radio buttons in a form-group
2. Wrap the invalid-feedback inside the last of the form-check classes

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="optionA">Make a choice!</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="optionA" required>
      <label class="form-check-label" for="optionA">
                            Option A please
                        </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="optionB" required>
      <label class="form-check-label" for="optionB">
                            Option B please
                        </label>
      <div class="invalid-feedback">
        You need to select either A or B
      </div>
    </div>

  </div>
  <button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>

Answer 4

Here is my current work-around. I don't believe this is the best way though, since I am using Javascript to do what Bootstrap should be doing.

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      if (!$("input:radio[name='radio-stacked']").is(":checked")) {
        $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "block");
      } else {
        $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "none");
      }      
      form.classList.add('was-validated');
    }, false);
  }, false);
  
  $('input[type=radio][name=radio-stacked]').change(function() {
    $("#radioStacked2").parent().siblings(".invalid-feedback").css("display", "none");
  });
  
})();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>




<form class="container" id="needs-validation" novalidate>
  <div class="row">
     <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-radio">
         <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Toggle this custom radio</span>
       </label>
       <label class="custom-control custom-radio">
         <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input" required>
         <span class="custom-control-indicator"></span>
         <span class="custom-control-description">Or toggle this other custom radio</span>
       </label>
      <div class="invalid-feedback">
        Please select an option.
      </div>
     </div>
  </div>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>