Native form validation does not open <details>
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
Native form validation will block form submission if there are invalid inputs inside <details> (e.g., blank "required" textbox).
But this will not automatically open <details> and display a validation message. Chrome, Edge, and Firefox all log an error to the console (input is not focusable) and display the next validation error if there is one.
It seems to me the <details> should automatically open, display a validation error, and focus the input. Clicking an anchor tag pointing to the input's ID inside the <details> opens it and focuses the input. Ctrl + F can even open the <details> element automatically.
Basic example: https://codepen.io/stephenrwicks/pen/ZYOdLxb
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 linked CodePen basic example and reproduce the native validation behavior in Chrome, Edge, and Firefox. Compare the current handling of invalid inputs inside
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100