Validation States

Show valid and invalid fields with text feedback.

Text feedback with border colour

Try submitting empty required fields, or fill them correctly. Feedback text must stay readable; colour alone is not enough.

At least two characters.

Important pattern

Pair border colour with persistent text.

<p class="feedback feedback-bad" id="bad-msg">Enter a player name.</p>
<input aria-invalid="true" aria-describedby="bad-msg">