Add better form validation for our newsletter and contact pages
Currently, we rely on the required
attribute for our newsletter signup and contact page forms. While this does provide basic validation for user input, it is a less than ideal experience.
The public email address we were using was failing to deliver email, so we prioritized speed in getting a replacement up and running. We can do better, however. We need:
-
JavaScript validation logic for empty required input on form submission. -
Clear and concise error messaging associated with each input via ARIA. -
A summary area at the top of the form if more than one error is present, linking to each relevant input field. -
A designed error state that does not rely on color alone.