Docs: Added form validation feedback example

site/src/content/docs/forms/validation.mdx

@@ -18,15 +18,34 @@ We are aware that currently the client-side custom validation styles and tooltip
 Here’s how form validation works with Bootstrap:
 
 - HTML form validation is applied via CSS’s two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements.
-- Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
-- To reset the appearance of the form (for instance, in the case of dynamic form submissions using Ajax), remove the `.was-validated` class from the `<form>` again after submission.
-- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class.
-- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
-- All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
-- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
-- You may provide custom validity messages with `setCustomValidity` in JavaScript.
-
-With that in mind, consider the following demos for our custom form validation styles, optional server-side classes, and browser defaults.
+- Bootstrap scopes the `:invalid` and `:valid` styles to a parent `.was-validated` class, usually applied to the `<form>`. This prevents required fields from showing as invalid on page load. Add `.was-validated` to the form when you want to show validation feedback (typically after submission is attempted).
+- To reset the form appearance (for example, after dynamic submissions using Ajax), remove the `.was-validated` class from the `<form>`.
+- As a fallback, `.is-invalid` and `.is-valid` classes can be used directly on form controls for [server-side validation](#server-side). These do not require a `.was-validated` parent class.
+- Due to CSS limitations, you cannot style a `<label>` that comes before a form control in the DOM without custom JavaScript.
+- All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a set of JavaScript methods for validating form controls.
+- Feedback messages can use browser defaults (which are different for each browser and cannot be styled) or Bootstrap’s custom feedback styles with additional HTML and CSS.
+- You can provide custom validity messages with `setCustomValidity` in JavaScript.
+
+### Showing Feedback Messages
+
+- Use `.valid-feedback` and `.invalid-feedback` elements after your form control to show feedback messages. Only one will be visible at a time, depending on the field’s validity.
+- To ensure accessibility, use the `aria-describedby` attribute on the form control and reference the IDs of your feedback elements. Example: `aria-describedby="inputValidFeedback inputInvalidFeedback"`.
+- When `.was-validated` is added to the form, Bootstrap will show `.invalid-feedback` if the field is invalid, and `.valid-feedback` if the field is valid. Without `.was-validated`, feedback messages remain hidden.
+
+```html
+<form class="was-validated">
+  <div class="mb-3">
+    <label for="input1" class="form-label">Email address</label>
+    <input type="email" class="form-control" id="input1" required aria-describedby="input1Valid input1Invalid">
+    <div id="input1Valid" class="valid-feedback">
+      Looks good!
+    </div>
+    <div id="input1Invalid" class="invalid-feedback">
+      Please enter a valid email.
+    </div>
+  </div>
+</form>
+```
 
 ## Custom styles