Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub 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.

Issue Analytics

State:
Created 6 years ago
Reactions:76
Comments:88 (27 by maintainers)

Top GitHub Comments

71reactions

aedartcommented, Aug 15, 2017

In your example, you might need to place the <div class="invalid-feedback"> right after the input (at least from what I understood in the docs).

<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]">
    <!-- feeback right after input -->
    <div class="invalid-feedback">can't be blank, is not a number</div>
  </div>
</div>

39reactions

martinbeancommented, Sep 27, 2017

Urgh, just ran in to this myself.

Why can’t we just have the .has-error, .has-success, and .form-control-feedback classes back? 😞

Top Results From Across the Web

Bootstrap 4 invalid feedback with input group not displaying

Boostrap 4 is very buggy. My suggestion is to replace: <div class="invalid-feedback"> Text here </div>. With: <div class="text-danger"> Text ...

Validation · Boosted v5.0

When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls. Custom feedback styles apply custom colors, borders,...

Bootstrap display invalid-feedback server side validation

I worked on a Bootstrap v4.4 form where the validation is done on the server-side (Laravel) and when I receive errors on the...

PBS 66 of X — Bootstrap Form Validation

<footer class="mt-3 p-2 bg-light" role="form" aria-label="Admin Login"> <form class="form-inline" action="javascript:void(0);"> <span class="input-group ...

Bootstrap 4 input group with validation on Codeply

Bootstrap 4 input group with validation Codeply example. ... <div class="invalid-feedback order-last ">. Error Message.