New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance HTML5 form validation with Javascript #2017

Closed
hbillings opened this Issue Jun 19, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@hbillings
Member

hbillings commented Jun 19, 2018

In the pursuit of #2011, we realized we're using HTML5 form validation for as many forms as possible, which is great except that it means we lose our default error styling.

Form fields with errors should look like this:
screen shot 2018-06-18 at 4 35 45 pm

Instead, they look like this:
screen shot 2018-06-18 at 4 33 45 pm

This is particularly a problem with radio buttons and checkboxes. In order to style them, USWDS hides the actual input element, which means no HTML5 error message shows up:
screen shot 2018-06-18 at 4 37 24 pm

It looks like we can use Javascript to hook into the events that are bubbling up from the HTML5 form fields and add styles as needed. This would not only allow us to apply our error styles evenly, but would also help us make sure that the errors are accessible properly. (Some folks said they couldn't get VoiceOver to read the HTML5 error, and I haven't been able to find anything definitive about whether they're accessible or not -- @toolness, do you know?)

@hbillings

This comment has been minimized.

Member

hbillings commented Jun 19, 2018

@hbillings

This comment has been minimized.

Member

hbillings commented Jun 19, 2018

The question came up, could we do this with just CSS, using something like :not(:empty):invalid? Seems like the answer is no -- input elements are "void" by definition and thus will always be considered empty.

I also looked into pairing :invalid with input:not([value=""]) or somesuch, but that doesn't work either. I'm guessing that while you can use :not to evaluate whether an attribute is present, you can't use it to determine whether the attribute is equal to something specific.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment