# ErrorMessage

Le message indiquant ce qu'il faut corriger dans un champ, juste en dessous.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-em">Heure</label><input class="feitio-input" aria-invalid="true" aria-describedby="pg-em-error" data-width="10" id="pg-em" value="25:00"><span class="feitio-error-message" id="pg-em-error"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Utilisez une heure entre 00:00 et 23:59</span></div>
```

## Quand l'utiliser

-   Lorsqu'un champ renvoie un problème : un par champ, toujours avec l'ErrorSummary en haut.

## Quand ne pas l'utiliser

-   **Pour un problème de page entière** (la connexion est tombée) : une erreur Notice.
-   **Tandis que la personne continue de taper :** ne pas signaler d'erreur avant qu'elle n'envoie.

## Exemples

### Sous le champ

Vins, gras, avec l'icône, `space-1` sous le contrôle.

Afficher le code

```html
<div class="feitio-field">
  …
  <span class="feitio-error-message" id="hora-erro">
    <svg class="feitio-icon" aria-hidden="true">…</svg>Use um horário entre 00:00 e 23:59
  </span>
</div>
```

## Faire et ne pas faire

Do

Write the email as name@example.com

Dit exactement quoi faire pour le corriger.

Don’t

Invalid email!

"Invalide" ne dit pas ce qui est faux, et le point d'exclamation crie.

## Écriture

-   Dites comment le corriger, pas juste qu'il est faux.
-   La même phrase dans le champ et dans le récapitulatif en haut.
-   Pas de "s'il vous plaît", pas d'apologie, pas de point d'exclamation.

## Accessibilité

-   Liené au champ via `aria-describedby`, et le champ obtient `aria-invalid="true"`.
-   Couleur, icône et mot : l'erreur lit sans distinguer le vin.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-error-message"`

obligatoire

Vin, en gras, avec l'icône.

`id`

texte

Ainsi le champ peut y faire référence avec `aria-describedby`.