HTMLInputElement : mthode 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.

En savoir plus
Voir la compatibilit complte

La mthode setCustomValidity() de l'interface HTMLInputElement dfinit un message de validit personnalis pour l'lment.

Syntaxe

setCustomValidity(message)

Paramtres

message: Le message utiliser pour les erreurs de validit.

Dans cet exemple, on passe l'ID d'un lment input et on dfinit diffrents messages d'erreur selon que la valeur est manquante, trop faible ou trop leve. Notez que le message n'est pas affich immdiatement. L'envoi du formulaire affichera le message, ou vous pouvez appeler la mthode reportValidity() sur l'lment.

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 leve");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

Il est essentiel de dfinir le message sur la chane 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.