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 · 67 comments

Comments

Projects
@simmerz

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

This comment has been minimized.

Show comment
Hide comment
@aedart

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

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

This comment has been minimized.

Show comment
Hide comment
@simmerz

simmerz Aug 15, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@aedart

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

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

This comment has been minimized.

Show comment
Hide comment
@simmerz

simmerz 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;
  }
}

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

This comment has been minimized.

Show comment
Hide comment
@aedart

aedart 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, ...

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 15, 2017

Member

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

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 mdo added css v4 labels Aug 15, 2017

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 15, 2017

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@fjsuarez

fjsuarez 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

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 16, 2017

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@tochoromero

tochoromero Aug 18, 2017

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.

tochoromero commented Aug 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Aug 18, 2017

Contributor

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)

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

This comment has been minimized.

Show comment
Hide comment
@wilsmex

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

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

This comment has been minimized.

Show comment
Hide comment
@talynone

talynone Aug 19, 2017

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 ?

talynone commented Aug 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@holotrek

holotrek Aug 20, 2017

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.

holotrek commented Aug 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jwnoz

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

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

This comment has been minimized.

Show comment
Hide comment
@tbolon

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

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

This comment has been minimized.

Show comment
Hide comment
@jwnoz

jwnoz 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

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

This comment has been minimized.

Show comment
Hide comment
@ReSpawN

ReSpawN 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. :(

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

This comment has been minimized.

Show comment
Hide comment
@FQ400

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

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

This comment has been minimized.

Show comment
Hide comment
@chrismbarr

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

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

This comment has been minimized.

Show comment
Hide comment
@lilpug

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

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

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Sep 27, 2017

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

Contributor

martinbean commented 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? 😞

@tmorehouse

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Sep 27, 2017

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@jimmymain

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

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 2, 2017

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Oct 2, 2017

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.

Contributor

tmorehouse commented Oct 2, 2017

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 3, 2017

Member

Thought about order, but that also fubars any hope of styling the rounded corners properly since first and last child or of type don't work.

No chance of extending the classes outside the inputs either right now. My goal is to provide as much validation behavior without any additional JS to toggle classes based on a parent or child.

Member

mdo commented Oct 3, 2017

Thought about order, but that also fubars any hope of styling the rounded corners properly since first and last child or of type don't work.

No chance of extending the classes outside the inputs either right now. My goal is to provide as much validation behavior without any additional JS to toggle classes based on a parent or child.

@tmorehouse

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Oct 3, 2017

Contributor

I still think both methods could be made available. native browser validation, and a few optional CSS class triggers for "server side" validation (which is a misnomer, as the validation could be done with client side JavaScript)

Contributor

tmorehouse commented Oct 3, 2017

I still think both methods could be made available. native browser validation, and a few optional CSS class triggers for "server side" validation (which is a misnomer, as the validation could be done with client side JavaScript)

@tmorehouse

This comment has been minimized.

Show comment
Hide comment
@tmorehouse

tmorehouse Oct 4, 2017

Contributor

And a note about accessibility... if one uses aria-describedby to point at the invalid-feedback element text, even though it may be hidden by CSS, some screen readers will still proudly read out the invalid feedback text (hidden or not), even when the input is valid or not validated.:

https://developer.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/

The ARIA attributes aria-labelledby and aria-describedby can be used to provide an accessible name or accessible description for a subset of HTML elements. It is important to note that by design, hiding the content (using CSS display:none or visibility:hidden or the HTML hidden attribute) of the element(s) referenced by these attributes does not stop the content from being used to provide the name/description.

So the current "rely on the browser" to handle validation and feedback has many more issues than just being visually "pretty" or "the latest" fad.

Methods to provide context sensitive name/description text
If you want to associate context sensitive text, such as an error message you can:

  • Add the referenced element to the DOM when the error state occurs.
  • Add the error text as child of the referenced element in the DOM when the error state occurs.
    non error state: <p id="error1"></p>
    error state: <p id="error1">incorrect mallory!</p>
  • Add the id reference in the DOM to the aria-labelledby/aria-describedby attribute, when the error state occurs.

The above basically states that server (or client script) is needed to ensure proper accessibility. Hence, relying on CSS sibling selectors to hide error information when an error hasn't occurred is faulty.

@patrickhlauke what is your take on this for A11Y?

Contributor

tmorehouse commented Oct 4, 2017

And a note about accessibility... if one uses aria-describedby to point at the invalid-feedback element text, even though it may be hidden by CSS, some screen readers will still proudly read out the invalid feedback text (hidden or not), even when the input is valid or not validated.:

https://developer.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/

The ARIA attributes aria-labelledby and aria-describedby can be used to provide an accessible name or accessible description for a subset of HTML elements. It is important to note that by design, hiding the content (using CSS display:none or visibility:hidden or the HTML hidden attribute) of the element(s) referenced by these attributes does not stop the content from being used to provide the name/description.

So the current "rely on the browser" to handle validation and feedback has many more issues than just being visually "pretty" or "the latest" fad.

Methods to provide context sensitive name/description text
If you want to associate context sensitive text, such as an error message you can:

  • Add the referenced element to the DOM when the error state occurs.
  • Add the error text as child of the referenced element in the DOM when the error state occurs.
    non error state: <p id="error1"></p>
    error state: <p id="error1">incorrect mallory!</p>
  • Add the id reference in the DOM to the aria-labelledby/aria-describedby attribute, when the error state occurs.

The above basically states that server (or client script) is needed to ensure proper accessibility. Hence, relying on CSS sibling selectors to hide error information when an error hasn't occurred is faulty.

@patrickhlauke what is your take on this for A11Y?

@davhdavh

This comment has been minimized.

Show comment
Hide comment
@davhdavh

davhdavh Oct 5, 2017

Please support is-(in)valid on the form-group element, or just any parent element of the invalid-feedback and. input elements.. That would solve most of the issues.

davhdavh commented Oct 5, 2017

Please support is-(in)valid on the form-group element, or just any parent element of the invalid-feedback and. input elements.. That would solve most of the issues.

@martinbean

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Oct 5, 2017

Contributor

The warning state would be welcomed back, too. I used to use it for drawing attention to inputs on edit forms that may have side effects but aren’t errors, i.e. inputting an article title in all-uppercase when it doesn’t need to be, or a warning that changing the name of an account will change that account’s URLs.

Contributor

martinbean commented Oct 5, 2017

The warning state would be welcomed back, too. I used to use it for drawing attention to inputs on edit forms that may have side effects but aren’t errors, i.e. inputting an article title in all-uppercase when it doesn’t need to be, or a warning that changing the name of an account will change that account’s URLs.

@shtse8

This comment has been minimized.

Show comment
Hide comment
@shtse8

shtse8 Oct 10, 2017

I have the same issue. I can't use the invalid-feedback with input-group properly.

shtse8 commented Oct 10, 2017

I have the same issue. I can't use the invalid-feedback with input-group properly.

@Konafets

This comment has been minimized.

Show comment
Hide comment
@Konafets

Konafets Oct 12, 2017

invalid-feedback has the following properties:

    display: none;
    margin-top: .25rem;
    font-size: .875rem;
    color: #dc3545;

So its not displayed.

Konafets commented Oct 12, 2017

invalid-feedback has the following properties:

    display: none;
    margin-top: .25rem;
    font-size: .875rem;
    color: #dc3545;

So its not displayed.

@printercu

This comment has been minimized.

Show comment
Hide comment
@printercu

printercu Oct 26, 2017

I've faced an issue and it's slightly related to input-group: it's usual to have some input groups, but with separate inputs, without collapsing borders like input-group does. For example:

  • 2 inputs for range values,
  • inputs may be wrapped into collapses to show one or another type depending on other fields,
  • Rails shows date select with default with 3 selects.

And it may require that all of them should have single error message. Workaround with flex-wrap may be unacceptable in some cases.

printercu commented Oct 26, 2017

I've faced an issue and it's slightly related to input-group: it's usual to have some input groups, but with separate inputs, without collapsing borders like input-group does. For example:

  • 2 inputs for range values,
  • inputs may be wrapped into collapses to show one or another type depending on other fields,
  • Rails shows date select with default with 3 selects.

And it may require that all of them should have single error message. Workaround with flex-wrap may be unacceptable in some cases.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 16, 2017

Member

New take on this coming in #25020. Demo of a new upcoming example featuring input group validation styles is at https://codepen.io/emdeoh/pen/mpewXo (hit the submit button to test). Please share feedback!

Member

mdo commented Dec 16, 2017

New take on this coming in #25020. Demo of a new upcoming example featuring input group validation styles is at https://codepen.io/emdeoh/pen/mpewXo (hit the submit button to test). Please share feedback!

@SPodjasek

This comment has been minimized.

Show comment
Hide comment
@SPodjasek

SPodjasek Dec 18, 2017

Contributor

@wilsmex I have similar issue with server side validation. Luckily for me I had to cope with following markup:

<div class="form-group has-danger">
    <label>Some field</label>
    <div class="input-group is-invalid">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control form-control-lg is-invalid">
    </div>
    <div class="invalid-tooltip">Error</div>
</div>

And solution for not displayed tooltip was pretty simple, replace this:

.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {

...with this:

.form-control,
.custom-select,
.input-group {
    .was-validated &:#{$state},
    &.is-#{$state} {

@mdo Maybe this could be applied as solution for server side validation case, when you can place feedback in parent of .input-group?

Contributor

SPodjasek commented Dec 18, 2017

@wilsmex I have similar issue with server side validation. Luckily for me I had to cope with following markup:

<div class="form-group has-danger">
    <label>Some field</label>
    <div class="input-group is-invalid">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control form-control-lg is-invalid">
    </div>
    <div class="invalid-tooltip">Error</div>
</div>

And solution for not displayed tooltip was pretty simple, replace this:

.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {

...with this:

.form-control,
.custom-select,
.input-group {
    .was-validated &:#{$state},
    &.is-#{$state} {

@mdo Maybe this could be applied as solution for server side validation case, when you can place feedback in parent of .input-group?

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 19, 2017

Member

We're aiming to only put the classes on the inputs, not the parents. Maybe that's something we can expand on in a future update?

Member

mdo commented Dec 19, 2017

We're aiming to only put the classes on the inputs, not the parents. Maybe that's something we can expand on in a future update?

@printercu

This comment has been minimized.

Show comment
Hide comment
@printercu

printercu Dec 19, 2017

@mdo is it planed to add ability to customize labels for invalid inputs as it was in bs3?

UPD. It seems to work now but only for custom checkboxes/radios as ~-selector applies only to following elements.

printercu commented Dec 19, 2017

@mdo is it planed to add ability to customize labels for invalid inputs as it was in bs3?

UPD. It seems to work now but only for custom checkboxes/radios as ~-selector applies only to following elements.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 21, 2017

Member

@printercu No, you cannot color the label of most inputs because the label comes before the input. There's no CSS selector that can target that. You could get fancy with some flexbox order, but that's about it.

Member

mdo commented Dec 21, 2017

@printercu No, you cannot color the label of most inputs because the label comes before the input. There's no CSS selector that can target that. You could get fancy with some flexbox order, but that's about it.

@mdo mdo moved this from Inbox to Needs review in v4 Beta 3 Dec 21, 2017

@printercu

This comment has been minimized.

Show comment
Hide comment
@printercu

printercu Dec 22, 2017

This way is not as flexible as bs3 was :(

I think most of applications will not decide to move validations to js as they are not useful for now without external libs. Also, because server-side validation is required anyway for security reasons, implementing js validations doubles the work to be done.

What if small js plugin will simply add .has-error/.has-succes class to closest .form-group on validation state change? This will keep flexible customization and bring js validations support.

Or at least to add a setting similar to $enable-transitions to make bs4 work the old way (support .has-error class on .form-group).

printercu commented Dec 22, 2017

This way is not as flexible as bs3 was :(

I think most of applications will not decide to move validations to js as they are not useful for now without external libs. Also, because server-side validation is required anyway for security reasons, implementing js validations doubles the work to be done.

What if small js plugin will simply add .has-error/.has-succes class to closest .form-group on validation state change? This will keep flexible customization and bring js validations support.

Or at least to add a setting similar to $enable-transitions to make bs4 work the old way (support .has-error class on .form-group).

@mdo mdo closed this in #25020 Dec 22, 2017

v4 Beta 3 automation moved this from Needs review to Shipped Dec 22, 2017

@erwin16

This comment has been minimized.

Show comment
Hide comment
@erwin16

erwin16 Jan 2, 2018

Using the latest beta-3, the invalid-feedback does not show up ( as in the beta-2 )
If I add the class="d-flex" to the invalid-feedback , then it shows up BUT when valid , it does not disappear ( should become display:none )

`


Password:

		<div class="">

			<div role="group" class="input-group">
				<input id="passwordInput" aria-invalid="true" class="form-control is-invalid" aria-describedby="passwordLiveFeedback" type="password">
				<div class="input-group-btn">
				    <a href="#" role="button" class="btn btn-info"><i aria-hidden="true" class="fa fa fa-eye-slash"></i></a>
				</div>
			</div>

			<div id="passwordLiveFeedback" class="invalid-feedback">
			                     At least 6 characters
			 </div><!----><!----><!---->

		</div>
	</div>




	<div id="userInputGroup5" role="group" aria-labelledby="userInputGroup5__BV_label_" class="b-form-group form-group">
	<label id="userInputGroup5__BV_label_" for="confirmPasswordInput" class="col-form-label pt-0">Confirm Password:</label>

	<div class="">

		<input id="confirmPasswordInput" class="form-control is-invalid" aria-describedby="confirmLiveFeedback" aria-invalid="true" type="password"> 

		<div id="confirmLiveFeedback" class="invalid-feedback">
		                     At least 6 characters
		    </div><!----><!----><!---->
		</div>

	</div>`

Is this something to be fixed in the 4.0.0 release or not ( should I trick it ? )

screen shot 2018-01-02 at 16 59 49

screen shot 2018-01-02 at 17 00 25

erwin16 commented Jan 2, 2018

Using the latest beta-3, the invalid-feedback does not show up ( as in the beta-2 )
If I add the class="d-flex" to the invalid-feedback , then it shows up BUT when valid , it does not disappear ( should become display:none )

`


Password:

		<div class="">

			<div role="group" class="input-group">
				<input id="passwordInput" aria-invalid="true" class="form-control is-invalid" aria-describedby="passwordLiveFeedback" type="password">
				<div class="input-group-btn">
				    <a href="#" role="button" class="btn btn-info"><i aria-hidden="true" class="fa fa fa-eye-slash"></i></a>
				</div>
			</div>

			<div id="passwordLiveFeedback" class="invalid-feedback">
			                     At least 6 characters
			 </div><!----><!----><!---->

		</div>
	</div>




	<div id="userInputGroup5" role="group" aria-labelledby="userInputGroup5__BV_label_" class="b-form-group form-group">
	<label id="userInputGroup5__BV_label_" for="confirmPasswordInput" class="col-form-label pt-0">Confirm Password:</label>

	<div class="">

		<input id="confirmPasswordInput" class="form-control is-invalid" aria-describedby="confirmLiveFeedback" aria-invalid="true" type="password"> 

		<div id="confirmLiveFeedback" class="invalid-feedback">
		                     At least 6 characters
		    </div><!----><!----><!---->
		</div>

	</div>`

Is this something to be fixed in the 4.0.0 release or not ( should I trick it ? )

screen shot 2018-01-02 at 16 59 49

screen shot 2018-01-02 at 17 00 25

@erwin16

This comment has been minimized.

Show comment
Hide comment
@erwin16

erwin16 Jan 2, 2018

Using the latest beta-3, the invalid-feedback does not show up ( as in the beta-2 )
If I add the class="d-flex" to the invalid-feedback , then it shows up BUT when valid , it does not disappear ( should become display:none )

`


Password:

		<div class="">

			<div role="group" class="input-group">
				<input id="passwordInput" aria-invalid="true" class="form-control is-invalid" aria-describedby="passwordLiveFeedback" type="password">
				<div class="input-group-btn">
				    <a href="#" role="button" class="btn btn-info"><i aria-hidden="true" class="fa fa fa-eye-slash"></i></a>
				</div>
			</div>

			<div id="passwordLiveFeedback" class="invalid-feedback">
			                     At least 6 characters
			 </div><!----><!----><!---->

		</div>
	</div>




	<div id="userInputGroup5" role="group" aria-labelledby="userInputGroup5__BV_label_" class="b-form-group form-group">
	<label id="userInputGroup5__BV_label_" for="confirmPasswordInput" class="col-form-label pt-0">Confirm Password:</label>

	<div class="">

		<input id="confirmPasswordInput" class="form-control is-invalid" aria-describedby="confirmLiveFeedback" aria-invalid="true" type="password"> 

		<div id="confirmLiveFeedback" class="invalid-feedback">
		                     At least 6 characters
		    </div><!----><!----><!---->
		</div>

	</div>`

Is this something to be fixed in the 4.0.0 release or not ( should I trick it ? using standard input in col + button in another col... my current fix... )

screen shot 2018-01-02 at 16 59 49

Uploading Screen Shot 2018-01-02 at 17.00.25.png…

erwin16 commented Jan 2, 2018

Using the latest beta-3, the invalid-feedback does not show up ( as in the beta-2 )
If I add the class="d-flex" to the invalid-feedback , then it shows up BUT when valid , it does not disappear ( should become display:none )

`


Password:

		<div class="">

			<div role="group" class="input-group">
				<input id="passwordInput" aria-invalid="true" class="form-control is-invalid" aria-describedby="passwordLiveFeedback" type="password">
				<div class="input-group-btn">
				    <a href="#" role="button" class="btn btn-info"><i aria-hidden="true" class="fa fa fa-eye-slash"></i></a>
				</div>
			</div>

			<div id="passwordLiveFeedback" class="invalid-feedback">
			                     At least 6 characters
			 </div><!----><!----><!---->

		</div>
	</div>




	<div id="userInputGroup5" role="group" aria-labelledby="userInputGroup5__BV_label_" class="b-form-group form-group">
	<label id="userInputGroup5__BV_label_" for="confirmPasswordInput" class="col-form-label pt-0">Confirm Password:</label>

	<div class="">

		<input id="confirmPasswordInput" class="form-control is-invalid" aria-describedby="confirmLiveFeedback" aria-invalid="true" type="password"> 

		<div id="confirmLiveFeedback" class="invalid-feedback">
		                     At least 6 characters
		    </div><!----><!----><!---->
		</div>

	</div>`

Is this something to be fixed in the 4.0.0 release or not ( should I trick it ? using standard input in col + button in another col... my current fix... )

screen shot 2018-01-02 at 16 59 49

Uploading Screen Shot 2018-01-02 at 17.00.25.png…

@SunnyEgbo

This comment has been minimized.

Show comment
Hide comment
@SunnyEgbo

SunnyEgbo Jan 5, 2018

How do we address a similar issue with HTML text?

e.g.,

`        self.helper.layout = Layout(
            HTML('<input type="text" name="first_name" maxlength="255" placeholder="First name" class="textinput textInput form-control col-lg-6" required id="id_first_name" />'),
            HTML('<input type="text" name="last_name" maxlength="255" placeholder="Last name" class="textinput textInput form-control col-lg-6" required id="id_last_name" />'),
....
)

`

SunnyEgbo commented Jan 5, 2018

How do we address a similar issue with HTML text?

e.g.,

`        self.helper.layout = Layout(
            HTML('<input type="text" name="first_name" maxlength="255" placeholder="First name" class="textinput textInput form-control col-lg-6" required id="id_first_name" />'),
            HTML('<input type="text" name="last_name" maxlength="255" placeholder="Last name" class="textinput textInput form-control col-lg-6" required id="id_last_name" />'),
....
)

`
@strongui

This comment has been minimized.

Show comment
Hide comment
@strongui

strongui Feb 6, 2018

This new setup doesn't make sense to me and I have no idea how it passed the alpha.

What this causes, is having to mix our input and error components. Because you can't have two separate components like INPUT GROUP and ERROR, because your ERROR component has to be rendered inside the input group to show up. That means you have to nest these components, which makes no sense to me, as they are already grouped by the form-group component.

Therefore, .has-error or .is-invalid on the .form-group should automatically show the .invalid-feedback component, no matter where it is in the child structure. Forcing it to be a direct sibling of input makes no sense to me.

strongui commented Feb 6, 2018

This new setup doesn't make sense to me and I have no idea how it passed the alpha.

What this causes, is having to mix our input and error components. Because you can't have two separate components like INPUT GROUP and ERROR, because your ERROR component has to be rendered inside the input group to show up. That means you have to nest these components, which makes no sense to me, as they are already grouped by the form-group component.

Therefore, .has-error or .is-invalid on the .form-group should automatically show the .invalid-feedback component, no matter where it is in the child structure. Forcing it to be a direct sibling of input makes no sense to me.

@martinbean

This comment has been minimized.

Show comment
Hide comment
@martinbean

martinbean Feb 6, 2018

Contributor

@strongui Completely agree with this. Using sibling selectors is just wholly inflexible and only covers a fraction of use cases. It’s great if you have a simple form and copy the mark-up from the Bootstrap documentation, but a lot of websites have forms more complex than that.

I’m all for using progressive features, but this seems to be a poorly supported and executed approach thus far.

Contributor

martinbean commented Feb 6, 2018

@strongui Completely agree with this. Using sibling selectors is just wholly inflexible and only covers a fraction of use cases. It’s great if you have a simple form and copy the mark-up from the Bootstrap documentation, but a lot of websites have forms more complex than that.

I’m all for using progressive features, but this seems to be a poorly supported and executed approach thus far.

@stevebauman

This comment has been minimized.

Show comment
Hide comment
@stevebauman

stevebauman Mar 2, 2018

Hmm, any update on this? Running into this now myself.

Sucks because I nest some input elements inside Vue components, and I can't apply the is-invalid error class to the nested input element since Vue applies it to the root div element.

:(

stevebauman commented Mar 2, 2018

Hmm, any update on this? Running into this now myself.

Sucks because I nest some input elements inside Vue components, and I can't apply the is-invalid error class to the nested input element since Vue applies it to the root div element.

:(

@stevebauman

This comment has been minimized.

Show comment
Hide comment
@stevebauman

stevebauman Mar 2, 2018

This is really lame. Since when was relying on HTML5 and JS validation good practice?

We really really need an option for server side validation.

I'm using VueJS to apply error messages that are returned from my server, and even with just this simple setup, having any nested Vue components hides Bootstrap 4's is-invalid messages since the error message isn't a child of the input element.

Bootstrap 3's setup worked great, but this is a mess to workaround.

This needs to be fixed imo.

stevebauman commented Mar 2, 2018

This is really lame. Since when was relying on HTML5 and JS validation good practice?

We really really need an option for server side validation.

I'm using VueJS to apply error messages that are returned from my server, and even with just this simple setup, having any nested Vue components hides Bootstrap 4's is-invalid messages since the error message isn't a child of the input element.

Bootstrap 3's setup worked great, but this is a mess to workaround.

This needs to be fixed imo.

@lilpug

This comment has been minimized.

Show comment
Hide comment
@lilpug

lilpug Mar 2, 2018

@stevebauman this has definitely been an issue for awhile and still is with icon wrapping as well, just curious though if you have nested inputs put into a vuejs component can you not just use in the component and style it how you usually would i.e. v-bind:class="{ is-invalid: "error logic here", is-valid: "valid logic here"}"

i did briefly create this example when it was in bootstrap 4 beta-1: https://github.com/lilpug/bootstrap-4-beta-validation

lilpug commented Mar 2, 2018

@stevebauman this has definitely been an issue for awhile and still is with icon wrapping as well, just curious though if you have nested inputs put into a vuejs component can you not just use in the component and style it how you usually would i.e. v-bind:class="{ is-invalid: "error logic here", is-valid: "valid logic here"}"

i did briefly create this example when it was in bootstrap 4 beta-1: https://github.com/lilpug/bootstrap-4-beta-validation

@strongui

This comment has been minimized.

Show comment
Hide comment
@strongui

strongui Mar 2, 2018

For anyone running into this issue, it is rather easy to fix in your own templates. I've already added this snippet to my app, and BS4 will act like BS3. I feel like this should be the default style markup, but at any rate, here you go:

SASS CODE


.form-group {
  &.was-validated {
    &.is-invalid {
      background-color: #ffe9e6;
      label {
        color: #dc3545;
      }
      .invalid-feedback {
        display: block;
      }
    }
  }
}

strongui commented Mar 2, 2018

For anyone running into this issue, it is rather easy to fix in your own templates. I've already added this snippet to my app, and BS4 will act like BS3. I feel like this should be the default style markup, but at any rate, here you go:

SASS CODE


.form-group {
  &.was-validated {
    &.is-invalid {
      background-color: #ffe9e6;
      label {
        color: #dc3545;
      }
      .invalid-feedback {
        display: block;
      }
    }
  }
}
@cbossi

This comment has been minimized.

Show comment
Hide comment
@cbossi

cbossi Mar 8, 2018

The .invalid-feedback element actually shows up if it is placed within the input-group. However, this leads to another problem regarding the border radius. A Solution for that problem is described here: #25110 (comment)

cbossi commented Mar 8, 2018

The .invalid-feedback element actually shows up if it is placed within the input-group. However, this leads to another problem regarding the border radius. A Solution for that problem is described here: #25110 (comment)

@kjdion84

This comment has been minimized.

Show comment
Hide comment
@kjdion84

kjdion84 Mar 25, 2018

^ Yup. The solution here is to simply add d-block to the invalid-feedback span.

Example (I'm using Laravel Blade):

<div class="form-group mb-0">
    <label for="subdomain">Subdomain <b class="text-danger">*</b></label>
    <div class="input-group">
        <input type="text" name="subdomain" id="subdomain" class="form-control{{ $errors->has('subdomain') ? ' is-invalid' : '' }}" value="{{ old('subdomain') }}">
        <div class="input-group-append">
            <span class="input-group-text">{{ str_replace(['http://', 'https://'], '', config('app.url')) }}</span>
        </div>
    </div>
    @if ($errors->has('subdomain'))<span class="invalid-feedback d-block">{{ $errors->first('subdomain') }}</span>@endif
</div>

kjdion84 commented Mar 25, 2018

^ Yup. The solution here is to simply add d-block to the invalid-feedback span.

Example (I'm using Laravel Blade):

<div class="form-group mb-0">
    <label for="subdomain">Subdomain <b class="text-danger">*</b></label>
    <div class="input-group">
        <input type="text" name="subdomain" id="subdomain" class="form-control{{ $errors->has('subdomain') ? ' is-invalid' : '' }}" value="{{ old('subdomain') }}">
        <div class="input-group-append">
            <span class="input-group-text">{{ str_replace(['http://', 'https://'], '', config('app.url')) }}</span>
        </div>
    </div>
    @if ($errors->has('subdomain'))<span class="invalid-feedback d-block">{{ $errors->first('subdomain') }}</span>@endif
</div>
@jimmymain

This comment has been minimized.

Show comment
Hide comment
@jimmymain

jimmymain Mar 26, 2018

I agree with @stevebauman this is properly broken... and lame.
Server side validation css is completely overridden by the local validation, making it effectively useless without hacking the scss.

setting .is-invalid on the input to indicate a server side error is overridden by local validations.

image

jimmymain commented Mar 26, 2018

I agree with @stevebauman this is properly broken... and lame.
Server side validation css is completely overridden by the local validation, making it effectively useless without hacking the scss.

setting .is-invalid on the input to indicate a server side error is overridden by local validations.

image

cbossi added a commit to cbossi/angular-playground that referenced this issue Apr 16, 2018

@skn3

This comment has been minimized.

Show comment
Hide comment
@skn3

skn3 Apr 17, 2018

adding more weight to this! Server side validation is totally broken in bootstrap4 apart from very very simple examples.

skn3 commented Apr 17, 2018

adding more weight to this! Server side validation is totally broken in bootstrap4 apart from very very simple examples.

@skn3

This comment has been minimized.

Show comment
Hide comment
@skn3

skn3 Apr 17, 2018

Here is a use case where the current syntax does not work. What if you have a composite input that is made of multiple inputs and then you want the validation info to appear below all the inputs? For example you might have a password and password-repeat and then want to show the error message underneath both.

skn3 commented Apr 17, 2018

Here is a use case where the current syntax does not work. What if you have a composite input that is made of multiple inputs and then you want the validation info to appear below all the inputs? For example you might have a password and password-repeat and then want to show the error message underneath both.

@burzum

This comment has been minimized.

Show comment
Hide comment
@burzum

burzum May 28, 2018

Cab we get a proper, official fix for this please?

burzum commented May 28, 2018

Cab we get a proper, official fix for this please?

@alexandremagro

This comment has been minimized.

Show comment
Hide comment
@alexandremagro

alexandremagro May 30, 2018

Same issue, any official solution? Would not it be better to .invalid-feedback be placed with .form-group?

alexandremagro commented May 30, 2018

Same issue, any official solution? Would not it be better to .invalid-feedback be placed with .form-group?

@kjdion84

This comment has been minimized.

Show comment
Hide comment
@kjdion84

kjdion84 May 30, 2018

Just add d-block to invalid-feedback so it shows no matter what.

kjdion84 commented May 30, 2018

Just add d-block to invalid-feedback so it shows no matter what.

simonihmig added a commit to kaliber5/ember-bootstrap that referenced this issue Jun 9, 2018

fix(FormElement): always show validation errors in BS4, including for…
… e.g. input groups

Due to BS4's CSS, the validation feedback element has to be a sibling of the input element (which has the validation class).
If the markup is different (e.g. input groups), validation messages would remain hidden. This is a known BS4 issue, see
twbs/bootstrap#23454

Fixes #578

janzankowski added a commit to epforgpl/epf-sso that referenced this issue Jul 5, 2018

Merge pull request #33 from epforgpl/18_07_05
Users must agree to T&C and privacy policy during registration. Also fixes to display of error messages, according to twbs/bootstrap#23454 (d-block bits).
@wtorsi

This comment has been minimized.

Show comment
Hide comment
@wtorsi

wtorsi Aug 29, 2018

Hi, what about group of inputs, i mean group of radio buttons or checkboxes, they must have one feedback for whole group.
What code should be in this case?

wtorsi commented Aug 29, 2018

Hi, what about group of inputs, i mean group of radio buttons or checkboxes, they must have one feedback for whole group.
What code should be in this case?

@wtorsi

This comment has been minimized.

Show comment
Hide comment
@wtorsi

wtorsi Aug 30, 2018

Ok, and what do you think, if we change an order in the input-group by flex order: the input will be always the first element in the group.
In this case the only thing we need to fix, is to change the layout markup of the input-group?

wtorsi commented Aug 30, 2018

Ok, and what do you think, if we change an order in the input-group by flex order: the input will be always the first element in the group.
In this case the only thing we need to fix, is to change the layout markup of the input-group?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment