Checkbox error text is always hidden

[aljchristensen]

Because of the way the Bootstrap style rules are set up, the way checkbox elements are currently structured results in the associated error text remaining hidden.

Right now, the resulting HTML structure when a checkbox form element has an associated error is:

<div class="form-group has-danger">
  <div class="custom-control custom-checkbox">
      <input type="checkbox" id="check" class="custom-control-input is-invalid">
      <label class="custom-control-label" for="check">Label text</label>
  </div>
  <div id="check_error_0" class="invalid-feedback">Error text</div>
</div>

but it needs to be

<div class="form-group has-danger">
  <div class="custom-control custom-checkbox">
      <input type="checkbox" id="check" class="custom-control-input is-invalid">
      <label class="custom-control-label" for="check">Label text</label>
      <div id="check_error_0" class="invalid-feedback">Error text</div>
  </div>
</div>

That is, the invalid-feedback div needs to be a subsequent sibling of the is-invalid input.

The relevant Bootstrap rules are

.invalid-feedback {
  display: none;
  ...
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

[adrianhurt]

Sorry @aljchristensen for the delay. I know it's too late, but at least the response is here 😓

You're right, I should document this known issue. The problem here is the library tries to have a consistent structure for the majority of the cases. The field constructor is who is charge of handling validations, feedback and helpers. And in that case the input itself is wrapped by a div, so this HTML is rendered.

So you need to make your own CSS hack using class .has-danger. In deed, that's one of the reasons I added has-* at form-group level. So you could try with something like:

.has-danger .invalid-feedback,
.has-danger .invalid-tooltip,
.has-success .valid-feedback,
.has-success .valid-tooltip {
    display: block;
}