HTMLInputElement : évènement invalid

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.

L'évènement invalid de l'interface HTMLInputElement est déclenché lorsqu'un élément soumis est contrôlé pour sa validité et ne respecte pas ses contraintes.

Cet évènement est utile pour afficher un récapitulatif des problèmes d'un formulaire lors de son envoi. Lors de l'envoi d'un formulaire, des évènements invalid sont déclenchés pour chaque contrôle du formulaire qui est invalide. La validité des éléments soumis est vérifiée avant l'envoi de leur formulaire parent <form>, ou après l'appel de la méthode checkValidity() de l'élément ou de son formulaire parent.

Cette vérification n'est pas effectuée lors de l'évènement blur.

Dans cet article

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou affectez un gestionnaire d'évènements à la propriété correspondante.

js
addEventListener("invalid", (event) => { })

oninvalid = (event) => { }

Type d'évènement

Un objet Event générique.

Exemples

Si un formulaire est soumis avec une valeur invalide, les éléments soumis sont vérifiés et, si une erreur est détectée, l'évènement invalid est déclenché sur l'élément invalide. Dans cet exemple, lorsqu'un évènement invalid est déclenché à cause d'une valeur invalide dans le champ input, la valeur invalide est ajoutée au journal.

HTML

html
<form action="#">
  <div>
    <label>
      Saisissez un entier entre 1 et 10&nbsp;:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="Envoyer" /></div>
</form>
<hr />
Valeurs invalides&nbsp;:
<ul id="log"></ul>

JavaScript

js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", (e) => {
  log.appendChild(document.createElement("li")).textContent = JSON.stringify(
    e.target.value,
  );
});

Résultat

Spécifications

Spécification

HTML
# event-invalid

HTML
# handler-oninvalid

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

L'élément HTML <form>
L'évènement lié : submit
La pseudo‑classe CSS :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