HTMLInputElement : 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 HTMLInputElement définit un message de validité personnalisé pour l'élément.

Syntaxe

setCustomValidity(message)

Paramètres

message: Le message à utiliser pour les erreurs de validité.

Dans cet exemple, on passe l'ID d'un élément input et on définit différents messages d'erreur selon que la valeur est manquante, trop faible ou trop élevée. Notez que le message n'est pas affiché immédiatement. L'envoi du 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("Veuillez indiquer un âge (obligatoire)");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("La valeur est trop faible");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("La valeur est trop élevée");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

Il est essentiel de définir le message sur la chaîne vide s'il n'y a pas d'erreurs. Tant que le message d'erreur n'est pas vide, le formulaire échouera à la validation et ne sera pas envoyé.