Renvoie vrai si un élément d'entrée contient des données valides.
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 :
<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>
Contient des propriétés booléennes liées à la validité d'un élément d'entrée.
Contient le message qu'un navigateur affichera lorsque la validité est fausse.
Indique si un élément d'entrée sera validé.
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 :
Défini sur true, si un message de validité personnalisé est défini.
Défini sur true, si la valeur d'un élément ne correspond pas à son attribut de motif.
Défini sur true, si la valeur d'un élément est supérieure à son attribut max.
Défini sur true, si la valeur d'un élément est inférieure à son attribut min.
Défini sur true, si la valeur d'un élément n'est pas valide selon son attribut step.
Défini sur true si la valeur d'un élément dépasse son attribut maxLength.
Défini sur true, si la valeur d'un élément n'est pas valide selon son attribut de type.
Défini sur true, si un élément (avec un attribut obligatoire) n'a aucune valeur.
Défini sur true, si la valeur d'un élément est valide.
Si le nombre dans un champ de saisie est supérieur à 100 (le max
de l'entrée attribut), afficher un message :
<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 :
<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>