Confirmer un mot de passe — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Confirmer un mot de passe

Événements et formulaires · niveau 2

Énoncé

Un formulaire d'inscription demande un mot de passe (au moins 8 caractères) et sa confirmation. Avec setCustomValidity, rendre le second champ invalide tant qu'il diffère du premier. Pourquoi faut-il revérifier quand le premier champ change ?

Corrigé


const f = document.querySelector("#f");

function verifierConfirmation() {
  const identiques = f.mdp2.value === f.mdp.value;
  f.mdp2.setCustomValidity(identiques ? "" : "Les deux mots de passe diffèrent.");
}

// La confirmation dépend des deux champs : on revérifie quand l'un ou l'autre change.
f.mdp.addEventListener("input", verifierConfirmation);
f.mdp2.addEventListener("input", verifierConfirmation);

f.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("compte créé");
});
f.addEventListener("invalid", (e) => console.log(e.target.name, ":", e.target.validationMessage), true);

On saisit deux mots de passe différents et l'on envoie, puis on corrige le premier champ et l'on envoie à nouveau :


mdp2 : Les deux mots de passe diffèrent.
--- on corrige le premier champ
compte créé

La validité du second champ dépend du premier. Si l'on ne revérifiait qu'à la saisie du second, corriger le premier laisserait l'erreur en place, et le formulaire serait refusé alors que les deux valeurs sont identiques.