HTMLButtonElement : méthode reportValidity()
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 décembre 2018.
La méthode reportValidity() de l'interface HTMLButtonElement effectue les mêmes étapes de vérification de validité que la méthode checkValidity(). De plus, si l'événement invalid n'est pas annulé, le navigateur affiche le problème à l'utilisateur·ice.
Syntaxe
reportValidity()
Paramètres
Aucun.
Valeur de retour
Retourne true si la valeur de l'élément ne présente aucun problème de validité ; sinon, retourne false.
Exemples
Cet exemple montre comment un bouton peut être rendu invalide.
HTML
On crée un formulaire qui ne contient que quelques boutons :
<form action="#" id="form" method="post">
<p>
<input type="submit" value="Envoyer" />
<button id="example" type="submit" value="fixed">CE BOUTON</button>
</p>
<p>
<button type="button" id="report">reportValidity()</button>
</p>
</form>
<p id="log"></p>
CSS
On ajoute un peu de CSS, y compris les styles :valid et :invalid pour notre bouton :
input[type="submit"],
button {
background-color: #3333aa;
border: none;
font-size: 1.3rem;
padding: 5px 10px;
color: white;
}
button:invalid {
background-color: #aa3333;
}
button:valid {
background-color: #33aa33;
}
JavaScript
On inclut une fonction pour basculer la valeur, le contenu et le message de validation du bouton d'exemple :
const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");
reportButton.addEventListener("click", () => {
const reportVal = exampleButton.reportValidity();
output.innerHTML = `reportValidity a retourné : ${reportVal} <br/> erreur personnalisée : ${exampleButton.validationMessage}`;
});
exampleButton.addEventListener("invalid", () => {
console.log("Événement 'invalid' déclenché sur exampleButton");
});
exampleButton.addEventListener("click", (e) => {
e.preventDefault();
if (exampleButton.value === "error") {
breakOrFixButton("fixed");
} else {
breakOrFixButton("error");
}
output.innerHTML = `message de validation : ${exampleButton.validationMessage} <br/> erreur personnalisée : ${exampleButton.validationMessage}`;
});
function breakOrFixButton() {
const state = toggleButton();
if (state === "error") {
exampleButton.setCustomValidity(
"Ceci est un message d'erreur personnalisé",
);
} else {
exampleButton.setCustomValidity("");
}
}
function toggleButton() {
if (exampleButton.value === "error") {
exampleButton.value = "fixed";
exampleButton.innerHTML = "Aucune erreur";
} else {
exampleButton.value = "error";
exampleButton.innerHTML = "Erreur personnalisée";
}
return exampleButton.value;
}
Résultat
Le bouton est valide par défaut. Activez « CE BOUTON » pour changer la valeur, le contenu et ajouter un message d'erreur personnalisé. L'activation du bouton « reportValidity() » vérifie la validité du bouton, affiche le message d'erreur personnalisé à l'utilisateur·ice et déclenche un événement invalid si le bouton ne passe pas la validation de contrainte à cause du message.
Spécifications
| Specification |
|---|
| HTML # dom-cva-reportvalidity-dev |
Compatibilité des navigateurs
Voir aussi
- La méthode
HTMLButtonElement.checkValidity() - L'élément HTML
<button> - L'élément HTML
<form> - Apprendre : Validation de formulaire côté client
- Guide : Validation de contraintes
- Les pseudo-classes CSS
:validet:invalid