API de Validation JavaScript

Méthodes et attributs de validation DOM.

Méthode

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

Attribut

Attribut Description
validity Contient les attributs booléens associés à la validité de l'élément input.
validationMessage Contient le message que le navigateur affichera si la validité est fausse.
willValidate Indique si l'élément input est validé.

Exemple - méthode checkValidity()

Si le champ d'entrée contient des données non valides, un message est affiché :

<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

Propriétés de validité

L'élément inputPropriétés de validitéContient de nombreuses propriétés liées à la validité des données :

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

Exemple

l'attribut rangeOverflow

Si le nombre dans le champ input est supérieur à 100 (input max Si l'attribut) est spécifié, un message est affiché :

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

Essayez-le vous-même

l'attribut rangeUnderflow

Si le nombre dans le champ input est supérieur à 100 (input max Si l'attribut) est spécifié, un message est affiché :

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

Essayez-le vous-même