Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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éthodecheckValidity() de l'interfaceHTMLInputElement retourne une valeur booléenne indiquant si l'élément respecte les règles devalidation des contraintes qui lui sont appliquées. Si elle retourne faux, la méthode déclenche également un évènementinvalid sur l'élément. CommecheckValidity() n'est associé à aucun comportement par défaut du navigateur, annuler cet évènementinvalid 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 quecheckValidity() retourne faux. Utilisez la méthodeHTMLInputElement.setCustomValidity() pour définirHTMLInputElement.validationMessage sur la chaîne vide afin de rendre l'étatvalidity valide.
Syntaxe
checkValidity();Paramètres
Aucun.
Valeur de retour
Retournetrue si la valeur de l'élément n'a pas de problèmes de validité ; sinon retournefalse.
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 min="21" max="65" /> </p> <p> <button type="submit">Envoyer</button> <button type="button">checkValidity()</button> </p> <p></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
Lorsquefalse, 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ôtHTMLInputElement.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