Inline form validations — UX design considerations and React examples
Validating forms well can be a tricky proposition. In this article, we’ll review some of the UX design considerations you need to think about with inline validations. I review asynchronous inline form validation considerations, discuss the “reward early, validate late” inline validation pattern, and finally demonstrate an example of this pattern using my React hooks-based forms API.
In Mihael Konjević’s article Inline validation in forms — designing the experience, Mihael exhaustively researches several inline validation patterns and recommends the inline validation pattern “reward early, punish late”. To put a more positive spin on the term in this article, I’ll go with “reward early, validate late”.
What are inline validations?
Inline validations validate input fields immediately and provide validation feedback inline, typically next to the input field. During form submit, a form will almost always evaluate all validations including the inline ones before continuing with form submission.
Inline validations provide feedback early and often to end users, so they provide a significant usability benefit. Inline validations will normally be triggered either when an input field changes (the onChange event), or when a user focuses out of an input field (the onBlur event).
