Telling someone what went wrong in HTML

An error message that is not connected to the field is an error message nobody hears.

<div class="field">
  <label for="email">Email</label>
  <input type="email" id="email" name="email"
         aria-describedby="email-hint email-error"
         aria-invalid="true" required>
  <p id="email-hint" class="hint">We only use this for receipts.</p>
  <p id="email-error" class="error" role="alert">
    Enter an address with an @ in it.
  </p>
</div>

How it works

1. aria-describedby ties the message to the input that failed.
2. aria-invalid marks the field itself, so the state is announced.
3. Put the message next to the field, not only at the top of the form.

The run, in numbers

Lines

10

Characters to type

329

Tokens

71

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 57 seconds.

Type this snippet

Step 3 of 5 in Validation & submission, step 21 of 25 in Forms & inputs.

← Previous Next →