HTMLObjectElement : méthode setCustomValidity()

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 juillet 2015.

La méthode setCustomValidity() de l'interface HTMLObjectElement définit un message de validité personnalisé pour l'élément.

Dans cet article

Syntaxe

setCustomValidity(errorMessage)

Paramètres

errorMessage

Le message à utiliser pour les erreurs de validité.

Dans cet exemple, on passe l'identifiant d'un élément input et on définit différents messages d'erreur selon que la valeur est manquante, trop basse ou trop élevée. Notez que le message ne s'affichera pas immédiatement. Tenter de soumettre le formulaire affichera le message, ou vous pouvez appeler la méthode reportValidity() sur l'élément.

js
function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("Vous devez remplir ce champ !");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("Veuillez entrer une valeur plus élevée !");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("Cette valeur est trop élevée !");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

Il est essentiel de définir le message comme une chaîne vide s'il n'y a pas d'erreur. Tant que le message d'erreur n'est pas vide, le formulaire ne passera pas la validation et ne sera pas soumis.

L'interface ValidityState
La propriété en lecture seule ValidityState.valueMissing
La propriété en lecture seule ValidityState.typeMismatch
La propriété en lecture seule ValidityState.patternMismatch
La propriété en lecture seule ValidityState.tooLong
La propriété en lecture seule ValidityState.tooShort
La propriété en lecture seule ValidityState.rangeUnderflow
La propriété en lecture seule ValidityState.rangeOverflow
La propriété en lecture seule ValidityState.stepMismatch
La propriété en lecture seule ValidityState.valid
La propriété en lecture seule ValidityState.customError

Aider à améliorer MDN

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

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 janv. 2026 par les contributeur·ice·s du MDN.

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

API HTML DOM
HTMLObjectElement
Propriétés d'instance
Méthodes d'instance
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

HTMLObjectElement : méthode setCustomValidity()

Dans cet article

Syntaxe

Paramètres

Valeur de retour

Exceptions

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN