HTMLInputElement : méthode checkValidity()
Baseline
Widely available
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.
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.
<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
| Specification |
|---|
| HTML # dom-cva-checkvalidity-dev |
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
:validet:invalid