Hacking Browser Validation: Take Control of Form Error Handling Without Third-Party Libraries

HTML5 brought many enhancements to web forms, including semantic field types (like date, time, number, email and URL) and a collection of attributes to add constraints to fields, such as required, min, and max. Using these features enables automatic validation in modern browsers that works even without JavaScript. But this built-in validation is limited: we get no control over the the error messages, limited control over styling, and the user experience is not consistent across browsers.

As an alternative, developers often turn to third-party Javascript libraries to help with validation, but these are often quite large and, depending on how they are implemented, may not be fully accessible. They also often require separate configuration for each form on which they are used. What if, instead, we could take advantage of the browser’s built-in validation capabilities but manage the error handling ourselves?

This session will explore the Constraint Validation API and how it can be used to create reusable, accessible, client-side form validation with full control over the error handling experience and messaging. The Constraint Validation API is the backbone of the browser’s built-in validation and is supported in all major browsers. We’ll use basic Javascript and accessibility best practices to display informative error messages with full control of the presentation and demonstrate how to create custom validation routines for use cases not covered by the standard constraints. The session will feature practical demonstrations with code provided that participants will be able to reuse and adapt to their own needs.

Presenters

Jason Pitoniak — Rochester Institute of Technology

Shortcode

WEB2

Tags