Salle 08 Aile B · Saisie et formulaires

L’erreur vague

Un « Erreur » en haut du formulaire, et débrouillez-vous.

0 salle visitée sur 37

Le piège

Version ratée

À vous : Trouvez le champ fautif et renvoyez le formulaire.

Réparé

Version corrigée

Vitrine fermée

Subissez d’abord le piège : elle s’ouvre toute seule.

Voir le code, avant et après

Version ratée

<form>
  <p class="error">⚠ Erreur dans le formulaire</p>
  <input type="text" id="email">
</form>

Version corrigée

<form>
  <label for="email">Email</label>
  <input type="email" id="email"
    aria-invalid="true"
    aria-describedby="error-email">
  <p id="error-email" role="alert">
    Email invalide : il manque le domaine (ex. marie@exemple.fr)
  </p>
</form>

.form-success {
  color: #38a169;
  font-weight: 600;
  margin-top: 1rem;
}

.field-error {
  color: #fc8181;
  font-size: 0.85rem;
  min-height: 1.5rem;
}

.form-success,
.field-error {
  transition: opacity 0.2s;
}

.field-error.fade-out {
  opacity: 0;
}