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

[simmerz]

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.

[aedart]

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>

[simmerz]

@aedart If I do that, it tries to fit in the feedback inside the input-group, which breaks the layout

[aedart]

Yes, you are right. Perhaps a span can do the trick.

Also, I just realized that you are also setting the .is-invalid on the parent div. I do not think that this has any effect at all. Only elements with form-control or .custom-select should be affected by this.

[simmerz]

I tried on the parent div. In the end, I've added the following which does what I want, but my gut says this should work off the shelf:

.input-group.is-invalid {
  ~ .invalid-feedback {
    display: block;
  }
}

[aedart]

You are right, just created the fiddle that shows you point: https://jsfiddle.net/aedart/tLwsztc0/

However, I'm not sure if the authors are going for this or not. But it does seem like a clear "lack" that invalid-feedback's appearance is entirely controlled by a siblings' state, ...

[mdo]

Definitely something to see if we can support. We're also missing proper support for checks and radios as mentioned in another issue.

[mdo]

Sorry, to elaborate, the problem is we're not actively asking folks to add a class to the parent of an input. With the HTML5 validation move in Beta 1, we're triggering everything off the state of the input. We need to see if there's something else we can do for the input group, but it's tough given that markup and styling for presenting inputs that way.

[fjsuarez]

Related to this issue, when using is-invalid on an input-group, it should give the border to the entire component.

<div class="input-group is-invalid">
    <div class="input-group-addon">%</div>
    <input type="number" class="form-control" required>          
</div>
<div class="invalid-feedback">
</div>

This snippet generates something that looks like this:

Applying border to the entire input-group would make it look more consistent with other default input controls, such as file input:

[mdo]

other default input controls, such as file input:

To be clear, that's not a default input control—that's a hacked up custom form control :).

[tochoromero]

I'm having the same problem.
But since I'm coming from the alpha version and I was using form-control-feedback with custom JS to hide it when needed, I was able to just override the display of the invalid-feedback:

.invalid-feedback {
  display: block;
}

I know this is not ideal, but at least it allowed me to move forward.

[tmorehouse]

I was encountering this issue as well, trying to figure out how to get the invalid-feedback to show when the invalid-feedback is not a sibling of the input (i.e input groups, etc.) and using a feedback text for custom file-input is another good example where this new method fails.

I don't think HTML5 validation is actually ready for the real web yet (not until CSS parent selectors become available, which I think is never).

Once could add in a JavaScript routine to monitor the validity state of an input (or the is-valid/invalid class) and then check for any elements that may have a for attribute that matches the input's ID, or via the aria-describedby attribute (which can contain a list of element IDs), and apply the states to those elements.

But it feels bad using JavaScript to correct this shortcoming.

Having a 'valid-feedback` element would be nice as well, or at least the ability to change the color of the invalid-feedback to green

It would be at least nice to get the ability to place a class on the input-group, and for radio-groups or stacked check boxes, etc (i.e feedback messages to select one)

[wilsmex]

I'm having this issue as well.
As mdo mentioned, It's impossible to trigger the 'block' status with the following markup being that everything is being triggered from the single input state. You have to have an 'is-invalid' state that gets added to the parent, as there are not 'parent' selectors in css...

  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon">@</div>
    <input type="text" class="form-control is-invalid" id="xyz" placeholder="xyz">
  </div>
  <div class="invalid-feedback">
     Please provide a valid state.
  </div>

Being that I use solely 'server validation' as they're calling it, I need that parent element 'is-invalid' hook back?

[talynone]

How would this be done on a centered bootstrap form centered using the grid system and I wanted to show validation message under the input box on an grouped input box ?

[holotrek]

Here's my temporary workaround until they fix this: https://codepen.io/evshell18/pen/WEzOdj

It's not perfect, and only really works well as long as you have only 1 line of validation text. If your text is longer than a line it might be in danger of flowing over the elements below it, as shown in the example.

Hopefully this gets fixed soon. It should be based on applying the .is-invalid class to the .input-group and having .form-controls within react to it.

[jwnoz]

temporary solution is to add these css

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

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

this will force the feedback to wrap into the 2nd line, then in your html put feedback below input

<div class="input-group is-invalid">
    <div class="input-group-addon"></div>
        <input type="number" class="form-control" required>
    <div class="invalid-feedback"></div>
</div>`

[tbolon]

@jwnoz it does not work correctly when the addon is at the end of group: the right border is removed. It is caused by the .input-group-addon:not(:last-child) rule.

[jwnoz]

@tbolon for that you need to manually add back the border

.input-group .input-group-addon:nth-last-child(2) {
    border-left: 0!important;
    border-right: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

use nth-child selector if you have more than one feedback

https://codepen.io/anon/pen/VzdPON

[ReSpawN]

If you ask me, all solutions above seem hacky - at best. The validation support for forms in Alpha 6 and TWBS 3 was a lot better. We're now sorta forced to rely on HTML5 input states rather and advanced markup for column model, input grouped input's.

Eagerly looking forward to a solution, for now I rely on my own CSS skills to make it work, as even examples from the docs don't support is-invalid properly. :(

[FQ400]

I have the same situation as @tochoromero and just overwrite it.
Is there a reason behind setting .invalid-feedback to display: none?

[ChrisMBarr]

I'm using angular, and I control the visibility of the feedback with that so I don't care about the nearby element with the is-invalid class.

This is my solution to add the d-block class and then manually make it always show exactly when I want it to.

<div class="invalid-feedback d-block" ng-if="form.$submitted && form.username.$invalid">

[lilpug]

i ran into this issue as well as i personally use VueJS to i handle all my own showing of validation errors and classes etc. I have built the following quick CSS file that extends the bootstrap 4-beta validation and allows you to do what you did originally in bootstrap 3, I have also added a JSFiddle example link, hope this helps anyone looking to do something similar.

https://github.com/lilpug/bootstrap-4-beta-validation
https://jsfiddle.net/lilpug/1m7heqqr/1/

[martinbean]

Urgh, just ran in to this myself.

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

[tmorehouse]

We should be able to have both the old way and the new way.

As well, it is nice to be able to show feedback in the success state as well, not just the invalid state.

Edit: it appears that there is an undocumented valid-feedback class. See #24811

[jimmymain]

damn: logged a question on stackoverflow before finding this issue. maybe the visibility there will create some up-votes for supporting both the has-* and :invalid feedback mechanisms. To be honest :valid doesn't have the flexibility of the old method, and I agree with @tmorehouse on displaying success as well as failure.

[mdo]

Testing out something in https://codepen.io/emdeoh/pen/ZXXQKM. Not perfect yet, but wanted to capture something to see if I can make a fix in Beta 2.

[tmorehouse]

@mdo Interesting.

It would be nice to be able to style the input addons too with the proper color/outline.

One thought would be to use flex ordering, and place the input first, and all the addons after, which would allow them to be styled with sibling selectors. But this makes accessibility a bit awkward, as what is provided to screen readers is not in the same order as presentation (i.e. say a $ was the first addon, or a checkbox was the first addon, and tab-order was changed since flex ordering doesn't change tab ordering).

Still, It also doesn't work well with form-groups, where you might have the feedback outside of the input-group (say if someone is making a re-usable form-group component).

Another consideration is when using a framework such as Angular, vue, React, etc, where validation is performed in the component (where more complex validation can take place, such as verifying that user's email exists in the DB, etc). There is no easy way to provide consistent feedback look and feel.

One may as well throw away the form-group markup, as it doesn't work with many of the custom inputs. (custom file - and even plain file inputs - especially has issues with the pseudo :invalid and :valid states in Firefox. the button inside the native file picker has the pseudo state, but the outer box of the file input doesn't)

I still think it would be worth while extending the .is-valid and .is-invalid classes to a form-group (or other outer container), that will trigger styles on input-groups, etc, and the valid/invalid feedback text similar to the bootstrap V3 and Boostrap V4.alpha code.

You can still leave in native browser validation for those that want it.

[collab-with-tushar-raj]

Well I was also facing the same issue for below code

<div class="form-group" >
     <label>Name<span class="asterisk">*</span></label>
    <input type="text" formControlName="PropertyName" [ngClass]="{ 'is-invalid': submitted && >propertiesForms.PropertyName.errors }">
      <div *ngIf="submitted && propertiesForms.PropertyName.errors" class="invalid-feedback">
            <div *ngIf="propertiesForms.PropertyName.errors.required">Name is required</div>
      </div>
</div>

To my surprise, when I added form-control class in input element, it worked like a charm. Best part is that I don't need to do any hack. So this my working code :-

<div class="form-group" >
     <label>Name<span class="asterisk">*</span></label>
    <input type="text" class="form-control" formControlName="PropertyName" [ngClass]="{ 'is-invalid': submitted && >propertiesForms.PropertyName.errors }">
      <div *ngIf="submitted && propertiesForms.PropertyName.errors" class="invalid-feedback">
            <div *ngIf="propertiesForms.PropertyName.errors.required">Name is required</div>
      </div>
</div>

[freddyouellette]

February 2019 and still no fix for this... input groups are broken for server-side validation. Bump

[azollai]

.invalid-feedback {
  display: block;
}

It did the trick. I am using it in an Angular component , that's why I don't specify it further...

[shanestreator]

is-invalid seems to be the way to go, you can conditionally use it with 'classnames'...

import classNames from 'classnames'

className={classNames( 'custom-select', 'd-block', 'w-100', 'bg-light', { 'is-invalid': errors.shippingCountry } )}

Hope this helps!

[martinbean]

C’mon. Is this getting fixed properly? It’s been an issue since the beta(s), through two minor releases, and there’s now talk of version 5 when this is still an issue.

@mdo? Can we get a definitive response as to the status of this bug and the Bootstrap’s team to fix it? It’s a tiny bit ridiculous people can’t have error messages show up for inputs unless they’re marked in a particular way (which may not be suitable for all apps).

[br3nt]

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.

[supermihi]

So why's this issue closed? Apparently, you need a hack (as summarized by @br3nt) to get it working, and the natural usage – just add the invalid-feedback after the input group – does not behave as expected..

[h0jeZvgoxFepBQ2C]

Yeah, whis the hell is this closed? Please reopen this.

[br3nt]

F**k it! I've just created a new ticket. #29439.

[comhernandez28]

Just thought I'd drop my workaround in Vue. You can probably translate it to other libraries pretty easily.
A little conditional styling does the trick:
This goes in the div with the invalid-feedback class.

:style="[ ERROR_TRUE ? {'display': 'block'} : {'display': 'none'}]"

[mdo]

FWIW, this issue is quite old and there have been changes to the form validation styles to make things more bulletproof. v4.4 in particular I believe saw some improvements (see #29264). The input groups show invalid feedback: https://codepen.io/emdeoh/pen/PoqBdzN.

That said, our docs show this working for custom styles and server side, but do note that input groups lose their rounded corners. (We have no way of targeting those corners reliably unfortunately.)

[repoles]

It is still not completely consistent. Look at the right border of the input elements inside a .input-group. It is not rounded.

[stevebauman]

@repoles He literally said this in his comment:

That said, our docs show this working for custom styles and server side, but do note that input groups lose their rounded corners. (We have no way of targeting those corners reliably unfortunately.)

[repoles]

@stevebauman sorry, I hadn't seen that note. Thanks!

[jenstroeger]

As per @mdo’s comment:

[…] but do note that input groups lose their rounded corners. (We have no way of targeting those corners reliably unfortunately.)

I’ve spent the last hour trying to find a somewhat supported solution to this but there doesn’t seem to be one. Looks like a manual override like this comment above suggests is as good as it gets?

[themustafaomar]

<div class="custom-file">
   <input type="file" class="custom-file-input is-invalid">
   <label class="custom-file-label" for="thumbnail">Choose file</label>
</div>
<div class="text-danger small" role="alert">
   <strong>Some message</strong>
</div>

[martinbean]

@themustafaomar Yes, you can emulate .invalid-feedback with other CSS, but it’s not a great solution for projects using templating to build forms and inputs.

[francisco-rojas]

The rounded corners issue can be solved with the border classes too: https://getbootstrap.com/docs/4.0/utilities/borders/
(rounded-right)