twbs / twbs/bootstrap

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

Open
#40,769 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs enhancement
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Forms Validation page at https://getbootstrap.com/docs/5.3/forms/validation/, especially the validation and server-side sections, and review the existing examples. Document how .valid-feedback, .invalid-feedback, .was-validated, .is-valid, .is-invalid, and setCustomValidity interact, including an example with both feedback messages. Done means the page answers the three questions without requiring external experimentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.