HTMLInputElement : méthode checkValidity()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

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.

Note : Un élément HTML <input> dont la propriété validationMessage n'est pas nulle est considéré comme invalide, correspondra à la pseudo-classe CSS :invalid et fera en sorte que checkValidity() retourne faux. Utilisez la méthode HTMLInputElement.setCustomValidity() pour définir HTMLInputElement.validationMessage sur la chaîne vide afin de rendre l'état validity valide.

Dans cet article

Syntaxe

checkValidity();

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.

html
<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

js
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}`;
});