La méthode checkValidity() de l'interface HTMLInputElement retourne une valeur booléenne indiquant si l'élément respecte les règles de validation des contraintes qui lui sont appliquées. Si elle retourne faux, la méthode déclenche également un évènement invalid sur l'élément. Comme checkValidity() n'est associé à aucun comportement par défaut du navigateur, annuler cet évènement invalid n'a aucun effet.

Syntaxe

Paramètres

Aucun.

Valeur de retour

Retourne true si la valeur de l'élément n'a pas de problèmes de validité ; sinon retourne false.

Exemples

HTML

Le formulaire ci‑dessous contient un champ numérique requis et deux boutons : l'un pour vérifier le formulaire et l'autre pour l'envoyer.

<form action="#" method="post">
  <p>
    <label for="age">Votre âge (21 à 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Envoyer</button>
    <button type="button" id="check">checkValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("Évènement invalid déclenché.");
});

checkButton.addEventListener("click", () => {
  const checkVal = ageInput.checkValidity();
  output.innerHTML = `checkValidity a retourné : ${checkVal}`;
});

Résultats

Lorsque false, si la valeur est manquante, inférieure à 21, supérieure à 65, ou autrement invalide, l'évènement invalid sera enregistré dans la console. Pour signaler l'erreur à l'utilisateur·rice, utilisez plutôt HTMLInputElement.reportValidity().

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode HTMLInputElement.reportValidity()
• L'élément HTML <input>
• L'élément HTML <form>
• Apprendre : Validation des données de formulaires côté client
• Guide : Validation des contraintes
• Les pseudo-classes CSS :valid et :invalid