Remove wrapping <div> and its class has-error for widgets

[stevepiercy]

This issue requires two things.

• Move the class is-invalid (formerly known as has-error) from the widget's wrapping <div> to the <input>'s class itself.
• Delete the <div> wrapping the control.

See #431 (comment)

[trollfot]

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.

[stevepiercy]

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

• preserve the wrapping div
• remove the has-error class
• setting the div'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>

[trollfot]

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.