Form error handling

[vavroom]

I'll be using Basin to process contact forms. I created a form for testing, but the proper form will have a different ID. I don't think that's an issue.

Right now, the form relies on required and puts in default HTML error messages, which aren't accessible. I'm going to swap required for aria-required. That should allow for custom creation of error messages.

I think this needs to be done via JavaScript.

• Errors only checked on submit.
• Error message loaded directly below input field.
• Error message programmatically attached to the input with aria-describedby.
• Focus placed on the first error on the form after submit.

The errors should be pretty simple. I don't want to run complex validation because there are too many edge case. I don't want to say "hey your email address isn't valid" if they are using a .ca domain, for example (happened to me just last week).

So we really just want the error message to check whether or not there's something in the field. If there isn't, throw in an error that says "The field [fieldname] can't be left blank". Where we customise [fieldname] with the actual name for the field.

ADDITIONALLY, I'm thinking about using a honeypot field. One that is not visually present, with the correct labeling and keyboard handling, just to try and trap bots. This is a low-fi techniques that is less problematic than captcha.

[shawnthompson]

Link added to find the page quicker: main/contact.md at master · nicolas-steenhout/main

From some of the toxic conversations on Slack, I've read at both Scott and Adrian say required is well supported by AT devices and it's perfectly find to use just that when you're just validating required field.

I personally think that users are very accustomed to the default browser implementation of the require, error handling.

If you are trying to do custom error messages you will need to make sure novalidate is in the form element.

You will also have to use the aria-invalid="false" and change it to aria-invalid="true" if the field is missed and trigger the message. Which is usual done natively by the browsers when using required.

Honey pot, great idea!

Edited: Spoke too fast, removed recommendation because you already did it!

Having said all this, I accept your challenge and will create the JavaScript for you.

Stay tuned!

[shawnthompson]

I would suggest removing the autocomplete="on" or using the actual value associated with the label.

According to the HTML Specs for 4.10.18.7 Autofill

If the autocomplete attribute is omitted, the default value corresponding to the state of the element's form owner's autocomplete attribute is used instead (either "on" or "off"). If there is no form owner, then the value "on" is used.

If I understand correctly the form owner, is the form element and seeing as though you didn't set autocomplete="off" on it, the default is on.

[shawnthompson]

I was able to submit the data to Basin and redirect to a page that you can control.

[vavroom]

I would suggest removing the autocomplete="on" or using the actual value associated with the label.

I will be using the correct token rather than the generic on. I've seen a few times where relying on "if it's not off, it's on by default" doesn't work with some weird mixes of AT