ErrorMessage

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

Sur cette page

Playground

HeureUtilisez une heure entre 00:00 et 23:59

Texte

Fond

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

Time

Use a time between 00:00 and 23:59

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

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.

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`.