...
The list of error messages can be triggered once the user has attempted to submit the form.
...
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