HTMLInputElement : méthode reportValidity() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

HTMLInputElement : méthode reportValidity()

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 décembre 2018.

La méthode reportValidity() de l'interface HTMLInputElement effectue les mêmes vérifications 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·rice.

Dans cet article

Syntaxe

reportValidity()

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

Utilisation simple

HTML

Le formulaire suivant 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="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

Lorsque le bouton « reportValidity() » est activé, on utilise la méthode reportValidity() pour vérifier si la valeur de l'entrée respecte ses contraintes. On consigne la valeur de retour. Si false, on affiche également le message de validation et on capture l'évènement invalid.

js
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

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

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" a retourné : ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Message de validation : "${ageInput.validationMessage}"`;
  }
});

Résultat

Lorsque false, si la valeur est manquante, inférieure à 21, supérieure à 65, ou autrement invalide, un message d'erreur apparaît, un évènement invalid est déclenché, et cet évènement est consigné dans la console.

Message d'erreur personnalisé

Cet exemple montre comment un message d'erreur personnalisé peut provoquer une valeur de retour false alors que la valeur serait autrement valide.

HTML

On ajoute un bouton « Corriger » au HTML de l'exemple précédent.

<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="report">reportValidity()</button>
    <button type="button" id="fix">Corriger</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

On reprend le JavaScript de l'exemple de base ci‑dessus en ajoutant une fonction qui utilise la méthode HTMLInputElement.setCustomValidity() pour fournir des messages d'erreur personnalisés. La fonction validateAge() ne met le message d'erreur à la chaîne vide que si l'entrée est valide ET si la variable enableValidation vaut true, avec enableValidation valant false tant que le bouton « Corriger » n'a pas été activé.

js
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "Corrigé";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" a retourné : ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Message de validation : "${ageInput.validationMessage}"`;
  }
});

function validateAge() {
  const validityState = ageInput.validity;
  if (validityState.valueMissing) {
    ageInput.setCustomValidity("Veuillez indiquer un âge (obligatoire)");
  } else if (validityState.rangeUnderflow) {
    ageInput.setCustomValidity("La valeur est trop faible");
  } else if (validityState.rangeOverflow) {
    ageInput.setCustomValidity("La valeur est trop élevée");
  } else if (enableValidation) {
    // met la chaîne vide si la valeur est valide ET si enableValidation a été activé
    ageInput.setCustomValidity("");
  }
}

Résultats

Si vous activez le bouton « reportValidity() » avant d'indiquer un âge, la méthode reportValidity() renvoie false car la contrainte required n'est pas satisfaite. Cette méthode déclenche un évènement invalid sur l'élément et signale le problème à l'utilisateur·rice en affichant le message d'erreur personnalisé « Veuillez indiquer un âge (obligatoire) ». Tant qu'un message d'erreur personnalisé est défini, l'activation du bouton « reportValidity() » continuera d'afficher une erreur même si vous sélectionnez un âge valide. Pour activer la validation, il faut réinitialiser le message d'erreur à la chaîne vide, ce qui est fait en cliquant sur le bouton « Corriger ».

La méthode HTMLInputElement.checkValidity()
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

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLInputElement : méthode reportValidity()

Dans cet article

Syntaxe

Paramètres

Valeur de retour

Exemples

Utilisation simple

HTML

JavaScript

Résultat

Message d'erreur personnalisé

HTML

JavaScript

Résultats

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN