Make a form validation feedback and input group work properly together

[nnseva]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

A simple CSS allows .invalid-feedback or .valid-feedback be anywhere inside a .form-check input div.

      /* invalid-feedback available anywhere inside form-check */
      .was-validated .form-check:has(:invalid) .invalid-feedback {
        display: block;
      }
      .was-validated .form-check:not(:has(:invalid)) .valid-feedback {
        display: block;
      }

Motivation and context

The great form validation feature allows showing feedback depending on the validation status of the form. Unfortunately, it restricts the feedback be only a direct sibling of the input.

It restricts using input-group feature together with the form validation, because the .input-group renders all elements in the group together, and .invaid-feedback in the same group makes it dirty, and doesn't work outside of the .input-group.

So, it is necessary to make .invalid-feedback (or .valid-feedback) available to be near to the input, but probably outside of the group where the input is actually present.

The best CSS filter is to have .invalid-feedback everywhere inside a .form-check which represents one "unit of check" on the form.

When any input elements in the .form-check group is invalid, the .invalid-feedback should be shown, but the .valid-feedback should be shown only when all elements inside a .form-check are valid.

Let's the following HTML is used:

    <form
      class="form needs-validation was-validated"
      novalidate
      onsubmit="return false"
    >
      <div class="row gx-1 gy-1">
        <div class="col col-12 col-sm-6 col-lg-4">
          <div class="input-group has-validation">
            <input
              type="number"
              class="form-control w-50"
              placeholder="Input"
              min="0"
              step="0.001"
              required
            />
            <select
              class="form-select input-group-text"
            >
              <option value="1">Units</option>
              <option value="10">Tens</option>
              <option value="100">Hundreeds</option>
            </select>
          <div class="form-text">
            Input some number
          </div>
        </div>
      </div>
    </form>

I want to add feedbacks for the numeric input below the input group. It's impossible with the current Bootstrap config, but easy with the new CSS definitions:

    <form
      class="form needs-validation was-validated"
      novalidate
      onsubmit="return false"
    >
      <div class="row gx-1 gy-1">
        <div class="form-check col col-12 col-sm-6 col-lg-4">
          <div class="input-group">
            <input
              type="number"
              class="form-control w-50"
              placeholder="Input"
              min="0"
              step="0.001"
              required
            />
            <select
              class="form-select input-group-text"
            >
              <option value="1">Units</option>
              <option value="10">Tens</option>
              <option value="100">Hundreeds</option>
            </select>
          </div>
          <div class="invalid-feedback">Input decimal value ≥ 0.000</div>
          <div class="valid-feedback">Input OK</div>
          <div class="form-text">
            Input some number
          </div>
        </div>
      </div>
    </form>

Working sample: https://codepen.io/nnseva/pen/xbKdeYG