Closed plousia closed 1 month ago
Are you talking about server side errors? If so, that should be managed separately.
If you aren't seeing errors in the client / browser when the conditions aren't meet, can you provide details of browser & version, os & version, etc. so I can debug?
Client/browser.
For sure. I just did a quick test on Brave browser, 1.67.123 Chromium: 126.0.6478.126 (Official Build) (64-bit). Windows 10.
Thanks for this. I’ll look to track down a Win10 VM so I can test.
I just ran a test in 1.67.1434 for macOS and Win10 the validation is working:
@plousia Are you still not seeing the browser intervene to enforce the validation behavior?
Huh. That's an odd one. Nope, I've just tried in Edge, Chrome and Firefox as well as the original Brave (all on Win10) and still nothing except on the email address field.
So strange. I have tested on Chrome, Firefox & Brave on Win10 (I’m waiting for an OS update to get the latest Edge on my Win10 test machine) with no issues. A few follow up questions for clarification:
Ah, you're using in-browser validation. I did realize you were using it on the email field but I thought maybe that was just because it wasn't one of the checkbox fields.
In that case I'd say the issue is using in-browser error handling; it has quite a few accessibility issues and when doing audits I always flag it. I'm happy to go into more detail about what those issues are, but bottom line, I'd recommend custom error handling.
Fair. My preference is to keep things as discrete and as unopinionated as possible. Someone could absolutely plug into the browser API and build their own individual field error reporting on top of it. I don’t want to step on their toes with that as they’ll want it to be consistent across all fields, not just checkbox groups.
That said, maybe there’s a place for a form-error-summary
web component that could capture a roll-up of all of the validation errors with the links & such (like you mentioned and as I typically do from the server side). 🤔 I’ll add it to my backlog.
Closing this as it’s not a bug, but rather as-designed.
When attempting to submit the demo form with no checkboxes selected, or the incorrect number of checkboxes, no error messages are given.
What I'd recommend:
On form submit, generate error messages for each fieldset with an error. Each error should have a unique ID. Associate the errors with their fieldsets using aria-describedby. Display the errors at the top of the fieldset, after the legend, as otherwise they might get missed, especially on smaller screens, for magnifier users, and/or lots of checkboxes. Programmatically focus the first input in the first fieldset with an error on form submit (this might not be the right way to go I suppose as this could be part of a longer form and there might be inputs before it with errors).