Dave Rupert, lead developer at Paravel, shows how you can leverage native form validation and still style your errors using only a couple of lines of JavaScript.

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. I finally sat down and spent a couple days trying to make HTML5 Form Validation work the way I want it.

https://daverupert.com/2017/11/happier-html5-forms/