HTMLInputElement : évènement invalid
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.
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.
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.
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
<form action="#">
<div>
<label>
Saisissez un entier entre 1 et 10 :
<input type="number" min="1" max="10" required />
</label>
</div>
<div><input type="submit" value="Envoyer" /></div>
</form>
<hr />
Valeurs invalides :
<ul id="log"></ul>
JavaScript
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
| Specification |
|---|
| HTML # event-invalid |
| HTML # handler-oninvalid |