Docs: the .valid-feedback and .invalid-feedback classes are insufficiently documented in the Forms Validation page
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
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.
-
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-describedbyto the invalid div, but then the valid one was never displayed. I tried adding them both toaria-describedby, and both were displayed. -
It's not clearly documented anywhere how the form's
.was-validatedattribute influences the display of elements with the.valid-feedbackand.invalid-feedbackclasses. -
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-invalidand.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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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