Open stevepiercy opened 3 years ago
The wrapping div, currently, allows us to group the label and the input/input-group, the feedback and the error in a logical container, named #item-${oid}. I don't think removing it would improve things.
@trollfot let's use the examples in my comment about the current and proposed markup for discussion.
Taking the "Example of server-side validation error style with description" and modifying it, would this be preferable, where the differences from the original example would be:
div
has-error
classdiv
's id
to align with the input
's id
<div
class="form-group item-text"
title="Enter some text"
id="item-inputPassword">
<label for="inputPassword">Password</label>
<input type="text" class="form-control is-invalid" id="inputPassword" aria-describedby="inputPasswordFeedback" required>
<div id="inputPasswordFeedback" class="invalid-feedback">
You entered only 7 characters, but at least 8 are required.
</div>
<small id="passwordHelpBlock" class="form-text text-danger">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
As a note : there are some exceptions. For the complex widgets, some wrapping divs still need to hold the error marker (is-invalid). Without this, the invalid-feedback block does not show up (it's hidden by CSS). The BS5 CSS enforces that the parent or direct sibling should have the class in order to display the error fully. it's true with nested structures, like the checked input/password and the date parts.
This issue requires two things.
is-invalid
(formerly known ashas-error
) from the widget's wrapping<div>
to the<input>
's class itself.<div>
wrapping the control.See https://github.com/Pylons/deform/issues/431#issuecomment-675390816