Restricción de validación DOM Métodos
| Propiedad | Descripción |
|---|---|
| checkValidity() | Devuelve true si un elemento de entrada contiene datos válidos. |
| setCustomValidity() | Establece la propiedad validationMessage de un elemento de entrada. |
Si un campo de entrada contiene datos no válidos, mostrar un mensaje:
El checkValidity () Método
<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> Inténtalo tú mismo " Restricción de validación propiedades DOM
| Propiedad | Descripción |
|---|---|
| validity | Contiene propiedades booleanas relacionados con la validez de un elemento de entrada. |
| validationMessage | Contiene el mensaje de un navegador mostrará cuando la validez es falsa. |
| willValidate | Indica si se validará un elemento de entrada. |
Propiedades de validez
La propiedad validez de un elemento de entrada contiene una serie de propiedades relacionadas con la validez de los datos:
| Propiedad | Descripción |
|---|---|
| customError | Se establece en true, si se ha establecido un mensaje validez personalizado. |
| patternMismatch | Se establece en true, si el valor de un elemento no coincide con su atributo patrón. |
| rangeOverflow | Se establece en true, si el valor de un elemento es mayor que su atributo max. |
| rangeUnderflow | Se establece en true, si el valor de un elemento es menor que su atributo min. |
| stepMismatch | Se establece en true, si el valor de un elemento no es válido por su atributo paso. |
| tooLong | Se establece en true, si el valor de un elemento excede su atributo maxLength. |
| typeMismatch | Se establece en true, si el valor de un elemento no es válido por su atributo tipo. |
| valueMissing | Se establece en true, si un elemento (con un atributo necesario) no tiene ningún valor. |
| valid | Se establece en true, si el valor de un elemento es válido. |
Ejemplos
Si el número en un campo de entrada es mayor que 100 (atributo max de la entrada), mostrar un mensaje:
La propiedad rangeOverflow
<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>
Inténtalo tú mismo " Si el número en un campo de entrada es menor que 100 (atributo min de la entrada), mostrar un mensaje:
La propiedad rangeUnderflow
<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>
Inténtalo tú mismo "