Errors (Erreurs)

Ce composant erreurs détermine l’affichage des messages d’erreurs générées par l’utilisateur lors de la saisie d’information, par exemple dans un formulaire. Il est utile à plusieurs composants comme les champs de texte, les menus déroulants, les cases-à-cocher, etc.

Usage

• Si possible, le message apparait sur une seule ligne.
• Tant que l’erreur n’est pas corrigée, il reste affiché. Sa disparition est conditionnée au type de formulaire :
  • Dans un formulaire standard, l’état d’erreur disparait suite à la soumission de l’ensemble du formulaire.
  • Dans un formulaire Ajax, chaque composant peut être auto-validé. L’état d’erreur disparait soit lors de la perte de focus du composant soit à la soumission du formulaire.
• La position du message dépend du composant auquel il est associé.
• Généralement, l’apparence visuelle du composant en erreur change pour indiquer son statut d’erreur.

Bonnes pratiques

• Dans un formulaire, le message doit limiter la frustration de l’utilisateur afin qu’il ne quitte pas cette page.
• Le texte doit être optimisé :
  • Il ne blâme jamais l’utilisateur.
  • Le message doit être compréhensible pour la cible (sans jargon ni vocabulaire technique).
  • Soit il explique clairement le problème soit il guide directement l’utilisateur sur la manière de résoudre le problème.
  • Les mots négatifs sont à éviter car ils peuvent inquiéter l’utilisateur.
  • Certains mots sont à proscrire : oups, erreur, échec, problème, invalide, faux, interdit, etc.
  • L’humour peut être utilisé dans un contexte particulier.

Style & code

Standard

Pour pouvoir être utilisé, il faut 2 objets dans le DOM : une <div> englobant le composant qui devra gérer l’erreur et une <div class="su-error-message"> contenant le texte du message d’erreur. L’affichage du message d’erreur ainsi que l’éventuelle modification visuelle du composant en erreur se fera par l’ajout de la classe su-error sur le 1^er <div>.

Le positionnement de ce message dépend du composant auquel il est associé.

Erreur non affichée

<div>
    <div class="su-error-message">Message d’erreur</div>
</div>

Erreur affichée

<div class="su-error">
    <div class="su-error-message">Message d’erreur</div>
</div>

Exemple de message d’erreur appliqué à un champ texte

<div class="su-error">
    <label for="input1">Label</label>
    <input id="input1" name="input1" type="email" required value="Value">
    <div class="su-error-message">Message d’erreur</div>
</div>