Cada día usamos más características de HTML5 pero a veces hay algunas que nos pasan un poco más desapercibidas. Uno de los ejemplos es HTML5 Constraint API que esta orientada a facilitar las validaciones de formularios. HTML5 soporta dos atributos que nos permiten validar elementos en un formulario, por un lado tenemos el atributo "required" que nos obliga a rellenar el campo y por otro lado tenemos el atributo "pattern" que obliga a que el campo se adapte a algún tipo de patrón. Vamos a ver un ejemplo a través de un formulario con dos nombres :
Si revisamos el código veremos que hemos añadido los atributos "required" a cada una de las cajas del formulario.
<html>
<head>
........
</head>
<body>
<form action="/destino.php" onsubmit="return validacion();" >
Nombre1: <input type= "text" id="nombre1" required>
Nombre2:<input type= "text" id="nombre2" required>
<input type="submit" value="Validar" >
</form>
</body>
</html>
Al configurarlos como campos requeridos, el formulario no podrá envisarse hasta que insertemos información en ellos . Por lo tanto con ambos campos vacíos el formulario presentará el siguiente mensaje:
El Objeto Validity
Una vez que tengamos los campos rellenos el formulario podrá ser enviado y la siguiente función de validación se ejecutará.
function validacion(){
var valido1= document.getElementById('nombre1').validity;
var valido2= document.getElementById('nombre2').validity;
console.log(valido1);
console.log(valido2);
return false;
}
Esta función unicamente obtiene los objetos Validity de cada una de las cajas de texto para imprimirlos por la consola.
Estos objetos son los encargados en HTML5 de almacenar toda la información relativa a un campo y a sus validaciones. Vamos a usar el método setCustomValidity() del API de HTML5 Constraint para cambiar el mensaje de error que sale en las cajas de texto en el caso de que los campos de texto almacenen datos diferentes. Para ello modificaremos la función de validación para que nos asigne el nuevo mensaje y modifique el comportamiento del objeto de Validity.
function validacion() {
var nombre1= document.getElementById('nombre');
var nombre2= document.getElementById('nombre2');
if (nombre1.value!=nombre2.value) {
nombre1.setCustomValidity("los nombres deben ser iguales");
nombre2.setCustomValidity("los nombres deben ser iguales");
}else {
nombre1.setCustomValidity("");
nombre2.setCustomValidity("");
}
console.log(nombre1.validity);
console.log(nombre2.validity);
}
Hecha esta primera parte deberemos modificar el formulario para que la función sea invocada nada mas perder el foco las cajas.
<form action="/destino.php" >
Nombre1: <input type= "text" id="nombre" required
onblur="validacion()">
Nombre2:<input type= "text" id="nombre2" required
onblur="validacion()">
<input type="submit" value="Validar" >
De esta forma el formulario comprobará primero que los dos campos sean obligatorios . Hecho esto cuando las cajas pierdan el foco se añadirá una validación adicional que obliga a que el contenido de ambas sea idéntico. Sino HTML5 mostrará el mensaje de error que le acabamos de configurar.
De esta forma conseguimos una personalización del API de HTML5 Constraint que nos permitirá una mayor flexibilidad a la hora de manejar los distintos tipos de validaciones en nuestras páginas.
En Genbeta Dev: Atributos personalizados en HTML5
