...
https://codepen.io/ademcifcioglu/pen/xdOyXv
Declaring Form Controls as Invalid
Wait to declare form controls as invalid until the form control has lost focus, or there has been an adequate delay in key presses (maybe a few seconds).
Example Default State:
<form novalidate>
<label for="name"> Name:</label>
<input id="name" required aria-invalid="false">
</form>
Example Invalid Error Message State:
<form novalidate>
<label for="name"> Name:</label>
<input id="name" required aria-describedby="name_msg" aria-invalid="true">
<span id="name_msg">Please enter your name.</span>
</form>
Code Example: https://codepen.io/TPG/pen/3b68c22db120c0960503fe892bb2c068
Error and Alert Messaging Within Forms
...