Constraint Validation Méthodes DOM
| Propriété | La description |
|---|---|
| checkValidity() | Renvoie true 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 non valides, afficher un message:
Le CheckValidity () Méthode
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj =
document.getElementById("id1");
if (inpObj.checkValidity()
== false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script> Essayez - le vous - même » Constraint validation DOM Propriétés
| Propriété | La description |
|---|---|
| validity | Contient des propriétés booléennes relatives à la validité d'un élément d'entrée. |
| validationMessage | Contient le message d'un navigateur affiche lorsque la validité est faux. |
| willValidate | Indique si un élément d'entrée sera validée. |
Propriétés de validité
La propriété de validité d'un élément d'entrée contient un certain nombre de propriétés liées à la validité des données:
| Propriété | La description |
|---|---|
| customError | Réglez true, si un message de validité personnalisé est défini. |
| patternMismatch | Définir à vrai, si la valeur d'un élément ne correspond pas à son attribut pattern. |
| rangeOverflow | Définir à vrai, si la valeur d'un élément est plus grand que son attribut max. |
| rangeUnderflow | Définir à vrai, si la valeur d'un élément est inférieure à son attribut min. |
| stepMismatch | Définir à vrai, si la valeur d'un élément est invalide par son attribut étape. |
| tooLong | Définir à vrai, si la valeur d'un élément dépasse son attribut maxLength. |
| typeMismatch | Définir à vrai, si la valeur d'un élément est invalide par son attribut type. |
| valueMissing | Réglez true, si un élément (avec un attribut obligatoire) n'a pas de valeur. |
| valid | Définir à vrai, si la valeur d'un élément est valide. |
Exemples
Si le nombre dans un champ d'entrée est supérieure à 100 (attribut max de l'entrée), afficher un message:
Le rangeOverflow propriété
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Essayez - le vous - même » Si le numéro dans un champ d'entrée est inférieure à 100 (l'attribut min de l'entrée), afficher un message:
Le rangeUnderflow propriété
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Essayez - le vous - même »