Validation du formulaire JavaScript


Table des matières

    Afficher la table des matières


Méthodes DOM de validation de contraintes

checkValidity()

Renvoie vrai si un élément d'entrée contient des données valides.

setCustomValidity()

Définit la propriété validationMessage d'un élément d'entrée.


Si un champ de saisie contient des données invalides, affichez un message :

La 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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

Propriétés DOM de validation de contraintes

validity

Contient des propriétés booléennes liées à la validité d'un élément d'entrée.

validationMessage

Contient le message qu'un navigateur affichera lorsque la validité est fausse.

willValidate

Indique si un élément d'entrée sera validé.



Propriétés de validité

La propriété de validité d'un élément d'entrée contient un nombre de propriétés liées à la validité des données :

customError

Défini sur true, si un message de validité personnalisé est défini.

patternMismatch

Défini sur true, si la valeur d'un élément ne correspond pas à son attribut de motif.

rangeOverflow

Défini sur true, si la valeur d'un élément est supérieure à son attribut max.

rangeUnderflow

Défini sur true, si la valeur d'un élément est inférieure à son attribut min.

stepMismatch

Défini sur true, si la valeur d'un élément n'est pas valide selon son attribut step.

tooLong

Défini sur true si la valeur d'un élément dépasse son attribut maxLength.

typeMismatch

Défini sur true, si la valeur d'un élément n'est pas valide selon son attribut de type.

valueMissing

Défini sur true, si un élément (avec un attribut obligatoire) n'a aucune valeur.

valid

Défini sur true, si la valeur d'un élément est valide.


Exemples

Si le nombre dans un champ de saisie est supérieur à 100 (le max de l'entrée attribut), afficher un message :

La propriété rangeOverflow

<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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Si le nombre dans un champ de saisie est inférieur à 100 (attribut min de la saisie), affichez un message :

La propriété rangeUnderflow

<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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>