Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
simmerz opened this issue Aug 15, 2017 · 88 comments
Closed

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

simmerz opened this issue Aug 15, 2017 · 88 comments
Labels

Comments

@simmerz
Copy link

simmerz commented Aug 15, 2017

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:

screen shot 2017-08-15 at 11 59 15

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

@aedart
Copy link

aedart commented 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>

@simmerz
Copy link
Author

simmerz commented Aug 15, 2017

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

@aedart
Copy link

aedart commented Aug 15, 2017

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
Copy link
Author

simmerz commented Aug 15, 2017

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
Copy link

aedart commented Aug 15, 2017

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
Copy link
Member

mdo commented Aug 15, 2017

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

@mdo
Copy link
Member

mdo commented Aug 15, 2017

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
Copy link

fjsuarez commented Aug 16, 2017

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:

image

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

image

@mdo
Copy link
Member

mdo commented Aug 16, 2017

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
Copy link

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
Copy link
Contributor

tmorehouse commented Aug 18, 2017

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
Copy link

wilsmex commented Aug 18, 2017

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
Copy link

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
Copy link

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
Copy link

jwnoz commented Aug 23, 2017

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
Copy link

tbolon commented Aug 23, 2017

@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
Copy link

jwnoz commented Aug 23, 2017

@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
Copy link

ReSpawN commented Aug 24, 2017

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
Copy link

FQ400 commented Aug 31, 2017

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

@ChrisMBarr
Copy link
Contributor

ChrisMBarr commented Aug 31, 2017

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
Copy link

lilpug commented Sep 25, 2017

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
Copy link
Contributor

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
Copy link
Contributor

tmorehouse commented Sep 27, 2017

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
Copy link

jimmymain commented Sep 28, 2017

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
Copy link
Member

mdo commented Oct 2, 2017

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
Copy link
Contributor

@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
Copy link

collab-with-tushar-raj commented Jan 31, 2019

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
Copy link

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

@azollai
Copy link

azollai commented Mar 1, 2019

.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
Copy link

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
Copy link
Contributor

martinbean commented Mar 6, 2019

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
Copy link

br3nt commented Jun 18, 2019

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>
  1. 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
Copy link

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
Copy link

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

@br3nt
Copy link

br3nt commented Sep 25, 2019

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

@comhernandez28
Copy link

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
Copy link
Member

mdo commented Mar 23, 2020

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.)

Screen Shot 2020-03-23 at 10 32 12 AM

Screen Shot 2020-03-23 at 10 29 47 AM

@repoles
Copy link

repoles commented Mar 25, 2020

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

@stevebauman
Copy link

@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
Copy link

repoles commented Mar 25, 2020

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

@jenstroeger
Copy link

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
Copy link

themustafaomar commented May 23, 2020

<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>

image

@martinbean
Copy link
Contributor

@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
Copy link

francisco-rojas commented Jan 6, 2021

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

fallen added a commit to pytition/Pytition that referenced this issue Oct 14, 2023
This is a known unresolved issue in Bootstrap 4
See: twbs/bootstrap#23454
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests