HTMLObjectElement : méthode setCustomValidity()

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

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

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.

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.