HTML has given us loads of form validation stuff in the last few years. Dave Rupert puts a point on the UX problems with it:
If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the
required attribute to inputs works wonderfully. However the styling portion with
input:invalid sorta sucks because empty inputs are trigger the
:invalid state, even before the user has interacted with the page.
Fortunately, there is an
invalid DOM event that does fire with useful timing: when the form is submitted. Remember this doesn’t buy you super deep browser support though. If you need that, look into polyfilling. I imagine the future of form validation is either HTML/CSS offering better and more controllable UX, or this.
Direct Link to Article — Permalink
Happier HTML5 Form Validation is a post from CSS-Tricks