Formulaire complet

Exemple de formulaire réaliste combinant tous les composants : validation à la soumission, résumé d'erreurs accessible, plusieurs messages d'erreur par champ et confirmation de succès.

<merisia-error-summary
  id="error-summary"
  title="Veuillez corriger les erreurs suivantes"
  hidden
  tabindex="-1"
></merisia-error-summary>

<form id="demo-form" novalidate>
  <merisia-input
    id="first-name"
    label="Prénom"
    name="first-name"
    autocomplete="given-name"
    required
  ></merisia-input>

  <merisia-input
    id="email"
    label="Adresse courriel"
    name="email"
    type="email"
    autocomplete="email"
    required
  ></merisia-input>

  <merisia-password
    id="password"
    label="Mot de passe"
    name="password"
    autocomplete="new-password"
    required
  ></merisia-password>

  <merisia-select id="province" label="Province" name="province" required></merisia-select>
  <merisia-radios id="transport" label="Mode de transport" name="transport" required></merisia-radios>
  <merisia-checkboxes id="terms" label="J'accepte les conditions." name="terms" required></merisia-checkboxes>

  <merisia-button type="submit" variant="primary">Soumettre</merisia-button>
</form>

<script type="module">
  // Assign options and rules
  document.querySelector('#province').options = [
    { value: 'qc', label: 'Québec' },
    { value: 'on', label: 'Ontario' },
  ];
  document.querySelector('#transport').options = [
    { value: 'walk', label: 'Marche' },
    { value: 'bike', label: 'Vélo' },
    { value: 'transit', label: 'Transport en commun' },
  ];
  document.querySelector('#password').rules = [
    { label: 'Au moins 8 caractères', test: (v) => v.length >= 8 },
    { label: 'Au moins une majuscule', test: (v) => /[A-Z]/.test(v) },
  ];

  // On submit: validate, populate error summary, or show success
  document.querySelector('#demo-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const errors = validateAllFields(); // your validation logic
    if (errors.length) {
      const summary = document.querySelector('#error-summary');
      summary.errors = errors; // [{ message, href }]
      summary.hidden = false;
      summary.focus();
    }
  });
</script>