trisquel

Aprende JavaScript con ejemplos (XVIII). La API de validación de campos de JavaScript

Ya sabemos que se pueden incorporar restricciones(constraints) en HTML para validar campos y formularios. Por ejemplo, si creamos este campo de texto en HTML:

<input id="edad" type="number" min="10" max="50">

Estamos diciendo que el campo edad será de tipo numérico y que deberá albergar un valor entre 10 y 50.

¿Cómo podemos validar esto en JavaScript?

Muy sencillo. Con el método checkValidity(). Veamos un ejemplo de utilización de este método:

<!DOCTYPE html>
<html>
<body>

<p>Introduce la edad y pulsa validar:</p>

<input id="campo" type="number" min="10" max="50">
<button onclick="valida()">VALIDAR</button>

<p>Introduzca la edad del usuario. Solamente se admitirán usuarios entre 10 y 50 años.</p>

<p id="texto"></p>

<script>
function valida() {
var inpObj = document.getElementById("campo");
if (inpObj.checkValidity() == false) {
document.getElementById("texto").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("texto").innerHTML = "Correcto";
}
}
</script>

</body>
</html>

Como puedes apreciar en el código anterior, tenemos un campo de texto con id “campo” y luego un botón que cuando se pulsa ejecutará la función valida().
La función valida hace la llamada a la función checkValidity() de la API para validar de forma automática las restricciones impuestas en el HTML.

Ejercicio 18.1
Copia el código anterior y ejecútalo en un navegador. Comprueba que funciona.

Propiedades del DOM de los objetos.

Los objetos por pertenecer al DOM tienen una propiedad que se denomina validity la cual almacena valores booleanos sobre la validez de un elemento input.

Con la propiedad validity podremos preguntar si un elemento es mayor que su atributo máximo (rangeOverflow), menor que su atributo mínimo (rangeUnderflow), si supera la longitud establecida (tooLong), etc.

Veamos un ejemplo de rangeOverflow:

if (document.getElementById("campo").validity.rangeOverflow) {
mensaje = "Valor muy grande";
}

Ejercicio 18.2
Investiga y pon un ejemplo de la propiedad typeMismatch y patternMismatch de validity.
Ejercicio 18.3
Investiga y pon un ejemplo de la propiedad valueMissing y valid de validity.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>