.invalid-feedback doesn't show for .input-group with an invalid control

[br3nt]

I'm reposting an outstanding bug that is documented in #23454 (closed). That issue has received ALOT of attention over a two year period but has not received a resolution.

Original issue:

Example:

<div class="form-group col-md-4">
  <label class="form-control-label is-invalid" for="valuation_value">Estimated Value</label>
  <div class="input-group is-invalid">
    <span class="input-group-addon">£</span>
    <input class="form-control is-invalid" min="0" type="number" value="" name="valuation[value]">
  </div>
  <div class="invalid-feedback">can't be blank, is not a number</div>
</div>

Results in:

I would expect to see can't be blank, is not a number under the input-group.

Summary of working hacks:

There are two working solutions (aka hacks) to get the invalid-feedback displaying for custom-file with an input-group-append.

1. Adding the flex-wrap class to the custom-file and adding the w-100 class to the invalid-feedback element.

    <div class="section measurements-area" style="display: none">
        <h4>Measure your test sample and upload the csv file</h4>
        <form id="measurements-form" class="needs-validation" novalidate>
            <div class="input-group input-group-sm">
                <div class="custom-file flex-wrap">
                    <input type="file" class="custom-file-input" id="measurements" required>
                    <div class="invalid-feedback w-100">
                        The measurements file is required.
                    </div>
                    <label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
                </div>
            </div>
        </form>
    </div>

2. Adding style="position: absolute; top: 3.0em" to the invalid-feedback element.

<form id="measurements-form" class="needs-validation" novalidate>
    <div class="input-group input-group-sm">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="measurements" required>
            <div class="invalid-feedback" style="position: absolute; top: 3.0em">
                The measurements file is required.
            </div>
            <label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
        </div>
        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
        </div>
    </div>
</form>

The downside to both of these is that invalid-feedback element no longer takes up space so elements below the custom-file don't accommodate by moving down to maintain expected spacing.

Furthermore, The following solutions DO NOT work for custom-file:

1. Adding the class d-block or d-flex to the invalid-feedback element.

.input-group {
    flex-wrap: wrap!important;
}

.input-group .invalid-feedback {
    flex-basis: 100%!important;
}

Also, the invalid-feedback element already has the property display: block.

[ysds]

Currently, there is no reasonable way to solve this issue (and #25110) when using the constraint validation API for input groups.

For v5, we should consider to remove support for the constraint validation API within input group, and support only CSS class-based (server-side) way.

This change needs breaking change the HTML structure, so it may be difficult to fix this issue in v4. Or it may be possible to support a new usage while keeping the current usage as deprecated.

[ysds]

Workarounds for V4: https://codepen.io/fellows3/pen/PoYgpxE?editors=1100

[br3nt]

Thanks for showing some work arounds.

Whats your logic for this?

For v5, we should consider to remove support for the constraint validation API within input group, and support only CSS class-based (server-side) way.

I don't think it makes sense to remove validation features for some types of form elements/groups and not others. I would expect most people would expect consistent validations for all form elements/groups and variants of.

[martinbean]

The radio silence from the Bootstrap team on this issue is infuriating. This issue was first raised nearly two-and-a-half years ago.

I’m sure this issue was raised when Bootstrap 4 was in alpha, and there have since been beta released and four 4.x releases where this fundamental issue has been ignored, yet work has been put into new components like spinners, toasts, and (yet another) icon set.

@mdo, @fat, wider twbs/bootstrap team: can we please get an official response on this issue? I don’t understand why it’s just been ignored with no timeline or response given.

[semyou]

just added d-block to the class of the feedback and it works like a charm.

 <div class="invalid-feedback d-block">
          Please choose a username.
  </div>

[mdo]

This work as-is, but it doesn't round the corners properly. That's been the long outstanding issue we haven't been able to solve without breaking changes. See https://codepen.io/emdeoh/pen/PoqBdzN for an input group demo. Please note the markup difference here has the invalid feedback inside the input group, which is demonstrated in our site docs.

@br3nt The start of your issue is about input groups, and then it's about custom files. It's unclear to me what the full issue is here, which likely explains our radio silence. As far as I know, the docs show what Bootstrap is currently capable of.

For v5, we're reviewing some changes to these things, too. See #30170.

[mdo]

#30180 shipped and addressed this as best as possible. Closing as we can't do much more as far as I can tell in v4.