Fix error messages not being displayed with nested input elements #314
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
So it's been some time, but there hasn't really been any feedback on how to handle it.
The source of the problem is that the error message element is not a sibling of an (input) element with an
is-invalid
class. This PR fixes that problem in 3 different places, where the input element is nested in a div:For input groups, Bootstrap now officially suggests to put the validation response as a sibling to an input group with an
is-invalid
class, so I thought it's safe to go that route, and add the error class to the input group wrapper. Before/After:In horizontally aligned checkboxes, the message (and help text) is moved into the nesting div, which markup wise and visually will unify with default aligned checkboxes. Before/After:
For custom file controls I've chosen adding the error class to the wrapper div too, just like for input groups, because a) moving the message element into the wrapper requires some bigger changes with additional templates, and b) it produces a visual glitch as Bootstrap by default restricts the elements height, causing the error message to "overlfow" and being placed over other elements. Before/After:
Problem with message in the wrapper:
A word of warning, none of these fixes are compatible with custom client-side validation, but it didn't work before either, so there's that.
ps. The tests keep growing and growing, and I think I could combine the tooltip and error tests, and also throw in help text usage, that would reduce the clutter a bit, but I'd do that in a followup, I need some rest first, putting these tests together is really tedious.
/cc @ravage84 Not sure, but IIRC you wanted to be notified about this.