Docs: the .valid-feedback and .invalid-feedback classes are insufficiently documented in the Forms Validation page

[dandv]

Prerequisites

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

Proposal

https://getbootstrap.com/docs/5.3/forms/validation/ doesn't document at all the .valid-feedback class. The functionality of .invalid-feedback is assumed to be understood, but is not documented:

Note that .invalid-feedback is also supported with these classes.

How exactly these classes work, in conjunction with .was-validated, or .setCustomValidity, isn't trivial to infer.

1. How can both valid and invalid feedback messages be added to a field, so that only one of them is displayed, according to the field's validity status? There are no examples on the page showing both divs; only one of them. I tried setting aria-describedby to the invalid div, but then the valid one was never displayed. I tried adding them both to aria-describedby, and both were displayed.

2. It's not clearly documented anywhere how the form's .was-validated attribute influences the display of elements with the .valid-feedback and .invalid-feedback classes.

3. Specifically at https://getbootstrap.com/docs/5.3/forms/validation/#server-side, why not use .setCustomValidity to indicate the validity status?

   in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid.

Motivation and context

I've been spending way too much time trying to grok the Form Validation page and running examples to understand how validation works. The docs should make this easy. See also #39407.