API de validation JavaScript

Validation contrainte méthode DOM

Attribut Description
checkValidity() Retourne true si l'élément input contient des données valides.
setCustomValidity() Définir l'attribut validationMessage de l'élément input.

Affiche un message si le champ de saisie contient des données invalides :

Méthode checkValidity()

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Essayez-le vous-même

Attributs DOM de validation de contrainte

Attribut Description
validity Contient les attributs booléens liés à la validité de l'élément d'entrée.
validationMessage Contient le message affiché par le navigateur lorsque la validité est false.
willValidate Indique si la validation de l'élément input doit être effectuée.

Attributs de validité

Les attributs de validité de l'élément input contiennent de nombreux attributs liés à la validité des données :

Attribut Description
customError Si un message d'erreur personnalisé est défini, il est défini sur true.
patternMismatch Si la valeur de l'élément ne correspond pas à son attribut pattern, il est défini sur true.
rangeOverflow Si la valeur de l'élément dépasse son attribut max, il est défini sur true.
rangeUnderflow Si la valeur de l'élément est inférieure à son attribut min, il est défini sur true.
stepMismatch Si la valeur de l'élément est invalide pour son attribut step, il est défini sur true.
tooLong Si la valeur de l'élément dépasse son attribut maxLength, il est défini sur true.
typeMismatch Si la valeur de l'élément est invalide pour son attribut type, il est défini sur true.
valueMissing Si l'élément (ayant la propriété required) n'a pas de valeur, il est défini sur true.
valid Si la valeur de l'élément est valide, il est définie sur true.

Exemple

Si le nombre entré dans le champ de saisie dépasse 100 (élément max Si la propriété ) est définie, un message est affiché :

Propriété rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Valeur OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Valeur trop grande";
  }
}
</script>

Essayez-le vous-même

Si le nombre dans le champ d'entrée est inférieur à 100 (élément min Si la propriété ) est définie, un message est affiché :

Propriété rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Valeur OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Valeur trop petite";
  }
}
</script>

Essayez-le vous-même