Skip to content

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

@dandv

Description

@dandv

Prerequisites

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions