merisia-error-message
<merisia-error-message>Message d'erreur accessible pour les champs de formulaire. Affiche un préfixe visuellement masqué "Erreur :" pour les lecteurs d'écran.
Démos
Erreur simple (composant autonome)
<merisia-error-message>Ce champ est requis.</merisia-error-message>Associé à un merisia-input via aria-describedby
Le message d'erreur est lié à un merisia-input via son id et
l'attribut error du composant input.
const el = document.getElementById('demo-email');
el.errors = ["L'adresse courriel est invalide."];Plusieurs messages d'erreur sur un seul champ
<merisia-input id="pwd" label="Mot de passe" name="pwd"></merisia-input>
<script>
document.getElementById('pwd').errors = [
'Doit contenir au moins 8 caractères.',
'Doit contenir au moins une majuscule.',
'Doit contenir au moins un chiffre.',
];
</script>Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaErrorMessage (propres) | ||||
| for | for | string | '' |
ID du champ de formulaire associé (pour l'association aria-describedby)
|
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique du composant |
| lang | lang | string | 'fr' | Langue pour les messages internes (i18n) |
| width | width | number | – |
Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)
|
Ressources externes
Import
import '@merisia-inc/merisia-components/error-message';
import '@merisia-inc/merisia-components/input'; // pour les démos