API de validation JavaScript
Méthodes DOM de validation des contraintes
| Propriété | Description |
|---|---|
| checkValidity() | Si les données dans l'élément input sont valides, renvoie true ; sinon, renvoie false. |
| setCustomValidity() | Définit la propriété validationMessage de l'élément input, une méthode utilisée pour personnaliser les messages d'erreur. Après avoir défini une invite personnalisée avec setCustomValidity, validity.customError devient true, et checkValidity renvoie toujours false. Pour revalider, vous devez annuler l'invite personnalisée comme suit :
setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)
|
L'exemple suivant renvoie un message d'erreur si les informations saisies sont invalides :
Méthode checkValidity()
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">Valider</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 »
Propriétés DOM de validation des contraintes
| Propriété | Description |
|---|---|
| validity | Une valeur d'attribut booléenne ; renvoie si la valeur du champ est valide. |
| validationMessage | Message d'erreur du navigateur |
| willValidate | Spécifie si le champ de saisie doit être validé |
Propriétés de validité
La propriétévalidity de l'élément inputContient une série d'attributs de données de validité :
| Propriété | Description |
|---|---|
| customError | Défini sur true si des informations de validité personnalisées sont définies. |
| patternMismatch | Défini sur true si la valeur de l'élément ne correspond pas à son attribut pattern. |
| rangeOverflow | Défini sur true si la valeur de l'élément est supérieure au maximum défini. |
| rangeUnderflow | Défini sur true si la valeur de l'élément est inférieure à son minimum. |
| stepMismatch | Défini sur true si la valeur de l'élément n'est pas définie conformément à l'attribut step spécifié. |
| tooLong | Défini sur true si la valeur de l'élément dépasse la longueur définie par l'attribut maxLength. |
| typeMismatch | Défini sur true si la valeur de l'élément ne correspond pas au type attendu. |
| valueMissing | Défini sur true si l'élément (attribut required) n'a pas de valeur. |
| valid | Défini sur true si la valeur de l'élément est valide. |
Exemples
Si la valeur saisie est supérieure à 100, affichez un message :
Propriété rangeOverflow
<input id="id1" type="number" max="100">
<button onclick="myFunction()">Valider</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "La valeur saisie est trop grande";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Essayez-le »
Si la valeur saisie est inférieure à 100, affichez un message :
Propriété rangeUnderflow
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "Ce que vous avez saisi n'est pas un nombre";
} else if (inpObj.validity.rangeUnderflow) {
txt = "La valeur saisie est trop petite";
} else {
txt = "La saisie est correcte";
}
document.getElementById("demo").innerHTML = txt;
}
//Vérifier si la saisie est un nombre
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
Essayez-le »