Self-validating form

LE HTML

novalidate coupe les bulles du navigateur, pour afficher nos propres messages.

<form id="f" novalidate>
  <label for="mail">E-mail</label>
  <input id="mail" type="email" aria-describedby="e-mail">
  <span id="e-mail" aria-live="polite"></span>
  <button>Envoyer</button>
</form>

LES RÈGLES

Chaque règle renvoie un message, ou une chaîne vide si tout va bien.

const REGLES = {
  mail: v => !v.trim() ? "L'e-mail est obligatoire."
    : !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim()) ? 'Il manque peut-être le domaine.' : ''
};

VÉRIFIER UN CHAMP

function verifier(id) {
  const champ = document.getElementById(id);
  const message = REGLES[id](champ.value);
  champ.setAttribute('aria-invalid', String(Boolean(message)));
  document.getElementById('e-' + id).textContent = message;
  return !message;
}

LE BON MOMENT

Au départ du champ d'abord, puis en direct une fois qu'il a été touché.

const touche = {};
for (const id in REGLES) {
  const champ = document.getElementById(id);
  champ.addEventListener('blur', () => { touche[id] = true; verifier(id); });
  champ.addEventListener('input', () => { if (touche[id]) verifier(id); });
}

ENVOYER

On vérifie tout, et on emmène le focus sur la première erreur.

document.getElementById('f').addEventListener('submit', e => {
  e.preventDefault();
  const erreurs = Object.keys(REGLES).filter(id => !verifier(id));
  if (erreurs.length) return document.getElementById(erreurs[0]).focus();
  // ici : envoyer au serveur
});