Capítulo 6 Formularios y API Forms -2
Ya hemos visto los nuevos tipos de campos disponibles en HTML5, por lo tanto es momento de estudiar los nuevos elementos HTML incorporados con la intención de mejorar o expandir las posibilidades de los formularios.
El elemento <datalist>
El elemento <datalist> es un elemento específico de formularios usado para construir una lista de ítems que luego, con la ayuda del atributo list, será usada como sugerencia en un campo del formulario.
<datalist id=»informacion»>
<option value=»123123123″ label=»Teléfono 1″>
<option value=»456456456″ label=»Teléfono 2″>
</datalist>
Listado 6-21. Construyendo la lista.
Este elemento utiliza el elemento <option> en su interior para crear la lista de datos a sugerir. Con la lista ya declarada, lo único que resta es referenciarla desde un elemento <input> usando el atributo list:
<input type=»tel» name=»telefono» id=»telefono» list=»informacion»> Listado 6-22. Ofreciendo una lista de sugerencias con el atributo list.
El elemento en el Listado 6-22 mostrará posibles valores para que el usuario elija.
El elemento <progress>
Este elemento no es específico de formularios, pero debido a que representa el progreso en la realización de una tarea, y usualmente estas tareas son comenzadas y procesadas a través de formularios, puede ser incluido dentro del grupo de elementos para formularios.
El elemento <progress> utiliza dos atributos para configurar su estado y límites. El atributo value indica qué parte de la tarea ya ha sido procesada, y max declara el valor a alcanzar para que la tarea se considere finalizada. Vamos a usar <progress> en futuros ejemplos.
Similar a <progress>, el elemento <meter> es usado para mostrar una escala, pero no de progreso. Este elemento tiene la intención de representar una medida, como el tráfico del sitio web, por ejemplo.
El elemento <meter> cuenta con varios atributos asociados: min y max configuran los límites de la escala, value determina el valor medido, y low, high y optimum son usados para segmentar la escala en secciones diferenciadas y marcar la posición que es óptima.
Este elemento representa el resultado de un cálculo. Normalmente ayudará a mostrar los resultados del procesamiento de valores provistos por un formulario. El atributo for asocia el elemento <output> con el elemento fuente que participa del cálculo, pero este elemento deberá ser referenciado y modificado desde código Javascript. Su sintaxis es
<output>valor</output>.
Seguramente no le sorprenderá saber que, al igual que cada uno de los aspectos de HTML5, los formularios HTML cuentan con su propia API para personalizar todos los aspectos de procesamiento y validación.
Existen diferentes formas de aprovechar el proceso de validación en HTML5. Podemos usar los tipos de campo para activar el proceso de validación por defecto (por ejemplo, email) o volver un tipo de campo regular como text (o cualquier otro) en un campo requerido usando el atributo required. También podemos crear tipos de campo especiales usando pattern para personalizar requisitos de validación. Sin embargo, cuando se trata de aplicar mecanismos complejos de validación (por ejemplo, combinando campos o comprobando los resultados de un cálculo) deberemos recurrir a nuevos recursos provistos por esta API.
setCustomValidity()
Los navegadores que soportan HTML5 muestran un mensaje de error cuando el usuario intenta enviar un formulario que contiene un campo inválido.
Podemos crear mensajes para nuestros propios requisitos de validación usando el método setCustomValidity(mensaje).
Con este método especificamos un error personalizado que mostrará un mensaje cuando el formulario es enviado. Cuando un mensaje vacío es declarado, el error es anulado.
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Formularios</title>
<script>
function iniciar(){
nombre1=document.getElementByld(«nombre»); nombre2=document.getElementById(«apellido») ; nombre1.addEventListener(«input», validacion, false); nombre2.addEventListener(«input», validacion, false); validacion();
}
function validacion(){
if(nombre1.value==» && nombre2.value==»){
nombre1.setCustomValidity(‘inserte al menos un nombre’); nombre1.style.background=’#FFDDDD’;
}else{
nombre1.setCustomValidity(»); nombre1.style.background=’#FFFFFF’ ;
}
}
window.addEventListener(«load», iniciar, false);
</script>
</head>
<body>
<section>
<form name=»registracion» method=»get»>
Nombre:
<input type=»text» name=»nombre» id=»nombre»>
Apellido:
<input type=»text» name=»apellido» id=»apellido»>
<input type=»submit» id=»send» value=»ingresar»>
</form>
</section>
</body>
</html>
Listado 6-23. Declarando errores personalizados.
El código del Listado 6-23 presenta una situación de validación compleja. Dos campos fueron creados para recibir el nombre y apellido del usuario. Sin embargo, el formulario solo será inválido cuando ambos campos se encuentran vacíos. El usuario necesita ingresar solo uno de los campos, su nombre o su apellido, para validar la entrada.
En casos como éste no es posible usar el atributo required debido a que no sabemos cuál campo el usuario decidirá utilizar. Solo con código Javascript y errores personalizados podremos crear un efectivo mecanismo de validación para este escenario.
Nuestro código comienza a funcionar cuando el evento load es disparado. La función iniciar() es llamada para responder al evento. Esta función crea referencias para los dos elementos <input> y agrega una escucha para el evento input en ambos. Estas escuchas llamarán a la función validacion() cada vez que el usuario escribe dentro de los campos.
Debido a que los elementos <input> se encuentran vacíos cuando el documento es cargado, debemos declarar una condición inválida para no permitir que el usuario envíe el formulario antes de ingresar al menos uno de los valores. Por esta razón la función validacion () es llamada al comienzo. Si ambos campos están vacíos el error es generado y el color de fondo del campo nombre es cambiado a rojo. Sin embargo, si esta condición ya no es verdad porque al menos uno de los campos fue completado, el error es anulado y el color del fondo de nombre es nuevamente establecido como blanco.
Es importante tener presente que el único cambio producido durante el procesamiento es la modificación del color de fondo del campo. El mensaje declarado para el error con setCustomValidity() será visible sólo cuando el usuario intente enviar el formulario.
Hágalo usted mismo: Para propósitos de prueba, incluimos el código Javascript dentro del documento. Como resultado, lo único que debe hacer para ejecutar este ejemplo es copiar el código del Listado 6-23 dentro de un archivo HTML vacío y abrir el archivo en su navegador.
IMPORTANTE: API Forms está siendo desarrollada en este momento. Dependiendo del nivel al que la tecnología haya sido adoptada en el momento en el que usted lee estas líneas es probable que necesite probar los códigos de este capítulo en diferentes navegadores para comprobar su correcto funcionamiento.
Cada vez que el usuario envía el formulario, un evento es disparado si un campo inválido es detectado. El evento es llamado invalid y es disparado por el elemento que produce el error. Podemos agregar una escucha para este evento y así ofrecer una respuesta personalizada, como en el siguiente ejemplo:
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Formularios</title>
<script>
function iniciar(){
edad=document.getElementById(«miedad»); edad.addEventListener(«change», cambiarrango, false); document.informacion.addEventListener(«invalid»,
validacion, true);
document.getElementById(«enviar»).addEventListener(«click»,
enviar, false);
}
function cambiarrango(){
var salida=document.getElementById(«rango»); var calc=edad.value-20; if(calc<20){ calc=0;
edad.value=2 0;
}
salida.innerHTML=calc+’ a ‘+edad.value;
}
function validacion(e){ var elemento=e.target; elemento.style.background=’#FFDDDD’ ;
}
function enviar(){
var valido=document.informacion.checkValidity(); if(valido){
document.informacion.submit();
}
}
window.addEventListener(«load», iniciar, false);
</script>
</head>
<body>
<section>
<form name=»informacion» method=»get»>
Usuario:
<input pattern=»[A-Za-z]{3,}» name=»usuario» id=»usuario»
maxlength=»10″ required>
Email:
<input type=»email» name=»miemail» id=»miemail» required> Rango de Edad:
<input type=»range» name=»miedad» id=»miedad» min=»0″
max=»80″ step=»20″ value=»20″> <output id=»rango»>0 a 20</output>
<input type=»button» id=»enviar» value=»ingresar»>
</form>
</section>
</body>
</html>
Listado 6-24. Nuestro propio sistema de validación.
En el Listado 6-24, creamos un nuevo formulario con tres campos para ingresar el nombre de usuario, un email y un rango de 20 años de edad.
El campo usuario tiene tres atributos para validación: el atributo pattern solo admite el ingreso de un texto de tres caracteres mínimo, desde la A a la Z (mayúsculas o minúsculas), el atributo maxlength limita la entrada a 10 caracteres máximo, y el atributo required invalida el campo si está vacío. El campo miemail cuenta con sus limitaciones naturales debido a su tipo y además no podrá enviarse vacío gracias al atributo required. El campo miedad usa los atributos min, max, step y value para configurar las condiciones del rango.
También declaramos un elemento <output> para mostrar en pantalla una referencia del rango seleccionado.
Lo que el código Javascript hace con este formulario es simple: cuando el usuario hace clic en el botón «ingresar», un evento invalid será disparado desde cada campo inválido y el color de fondo de esos campos será cambiado a rojo por la función validacion ().
Veamos este procedimiento con un poco más de detalle. El código comienza a funcionar cuando el típico evento load es disparado luego que el documento fue completamente cargado. La función iniciar() es ejecutada y tres escuchas son agregadas para los eventos change, invalid y click.
Cada vez que el contenido de los elementos del formulario cambia por alguna razón, el evento change es disparado desde ese elemento en particular. Lo que hicimos fue escuchar a este evento desde el campo range y llamar a la función cambiarrango() cada vez que el evento ocurre. Por este motivo, cuando el usuario desplaza el control del rango o cambia los valores dentro de este campo para seleccionar un rango de edad diferente, los nuevos valores son calculados por la función cambiarrango (). Los valores admitidos para este campo son períodos de 20 años (por ejemplo, 0 a 20 o 20 a 40). Sin embargo, el campo solo retorna un valor, como 20, 40, 60 u 80. Para calcular el valor de comienzo del rango, restamos 20 al valor actual del campo con la fórmula edad.value – 20, y grabamos el resultado en la variable calc. El período mínimo admitido es 0 a 20, por lo tanto con un condicional if controlamos esta condición y no permitimos un período menor (estudie la función cambiarrango () para entender cómo funciona).
La segunda escucha agregada en la función iniciar () es para el evento invalid. La función validacion () es llamada cuando este evento es disparado para cambiar el color de fondo de los campos inválidos. Recuerde que este evento será disparado desde un campo inválido cuando el botón «ingresar» sea presionado. El evento no contiene una referencia del formulario o del botón «ingresar», sino del campo que generó el error. En la función validacion () esta referencia es capturada y grabada en la variable elemento usando la variable e y la propiedad target. La construcción e.target retorna una referencia al elemento <input> inválido. Usando esta referencia, en la siguiente línea cambiamos el color de fondo del elemento.
Volviendo a la función iniciar (), encontraremos una escucha más que necesitamos analizar. Para tener control absoluto sobre el envío del formulario y el momento de validación, creamos un botón regular en lugar del típico botón submit. Cuando este botón es presionado, el formulario es enviado, pero solo si todos sus elementos son válidos. La escucha agregada para el evento click en la función iniciar () ejecutará la función enviar() cuando el usuario haga clic sobre el botón. Usando el método checkValidity() solicitamos al navegador que realice el proceso de validación y solo enviamos el formulario usando el tradicional método submit () cuando ya no hay más condiciones inválidas.
Lo que hicimos con el código Javascript fue tomar control sobre todo el proceso de validación, personalizando cada aspecto y modificando el comportamiento del navegador.
Cuando abrimos el archivo con la plantilla del Listado 6-24 en el navegador, podremos notar que no existe una validación en tiempo real. Los campos son sólo validados cuando el botón «ingresar» es presionado. Para hacer más práctico nuestro sistema personalizado de validación, tenemos que aprovechar los atributos provistos por el objeto
ValidityState.
<!DOCTYPE html>
<html lang=»es»>
<head>
<title>Formularios</title>
<script>
function iniciar(){
edad=document.getElementById(«miedad»); edad.addEventListener(«change», cambiarrango, false); document.informacion.addEventListener(«invalid», validacion, true);
document.getElementById(«enviar»).addEventListener(«click»,
enviar, false);
document.informacion.addEventListener(«input», controlar,
function cambiarrango(){
var salida=document.getElementById(«rango»); var calc=edad.value-20; if(calc<20){ calc=0;
edad.value=2 0;
}
salida.innerHTML=calc+’ a ‘+edad.value;
}
function validacion(e){ var elemento=e.target; elemento.style.background=’#FFDDDD’;
}
function enviar(){
var valido=document.informacion.checkValidity() ; if(valido){
document.informacion.submit();
}
}
function controlar(e){ var elemento=e.target; if(elemento.validity.valid){
elemento.style.background=’#FFFFFF’ ;
}else{
elemento.style.background=’#FFDDDD’;
}
}
window.addEventListener(«load», iniciar, false);
</script>
</head>
<body>
<section>
<form name=»informacion» method=»get»>
Usuario:
<input pattern=»[A-Za-z]{3,}» name=»usuario» id=»usuario»
maxlength=»10″ required>
Email:
<input type=»email» name=»miemail» id=»miemail» required> Rango de Edad:
<input type=»range» name=»miedad» id=»miedad» min=»0″
max=»80″ step=»20″ value=»20″> <output id=»rango»>0 a 20</output>
<input type=»button» id=»enviar» value=»ingresar»>
</form>
</section>
</body>
</html>
Listado 6-25. Validando en tiempo real.
En el Listado 6-25, una nueva escucha fue agregada para el evento input sobre el formulario. Cada vez que el usuario modifica un campo, escribiendo o cambiando su contenido, la función controlar () es ejecutada para responder a este evento.
La función controlar() también aprovecha la propiedad target para crear una referencia hacia el elemento que disparó el evento input. La validez del campo es controlada por medio del estado valid provisto por el atributo validity en la construcción elemento.validity.valid.
El estado valid será true (verdadero) si el elemento es válido y false (falso) si no lo es. Usando esta información cambiamos el color del fondo del elemento. Este color será, por lo tanto, blanco para un campo válido y rojo para uno inválido.
Con esta simple incorporación logramos que cada vez que el usuario modifica el valor de un campo del formulario, este campo será controlado y validado, y su condición será mostrada en pantalla en tiempo real.
En el ejemplo del Listado 6-25 controlamos el estado valid. Este estado particular es un atributo del objeto ValidityState que retornará el estado de un elemento considerando cada uno de los posibles estados de validación. Si cada condición es válida entonces el valor del atributo valid será true (verdadero).
Existen ocho posibles estados de validez para las diferentes condiciones:
valueMissing Este estado es true (verdadero) cuando el atributo required fue declarado y el campo está vacío.
typeMismatch Este estado es true (verdadero) cuando la sintaxis de la entrada no corresponde con el tipo especificado (por ejemplo, si el texto insertado en un tipo de campo email no es una dirección de email válida). patternMismatch Este estado es true (verdadero) cuando la entrada no corresponde con el patrón provisto por el atributo pattern.
tooLong Este estado es true (verdadero) cuando el atributo maxlength fue declarado y la entrada es más extensa que el valor especificado para este atributo.
rangeUnderflow Este estado es true (verdadero) cuando el atributo min fue declarado y la entrada es menor que el valor especificado para este atributo. rangeOverflow Esta estado es true (verdadero) cuando el atributo max fue declarado y la entrada es más grande que el valor especificado para este atributo. stepMismatch Este estado es true (verdadero) cuando el atributo step fue declarado y su valor no corresponde con los valores de atributos como min, max y value. customError Este estado es true (verdadero) cuando declaramos un error personalizado usando el método setCustomValidity () estudiado anteriormente.
Para controlar estos estados de validación, debemos utilizar la sintaxis elemento.validity.estado (donde estado es cualquiera de los valores listados arriba). Podemos aprovechar estos atributos para saber exactamente que originó el error en un formulario, como en el siguiente ejemplo:
function enviar(){
var elemento=document.getElementById(«usuario»); var valido=document.informacion.checkValidity();
if(valido){
document.informacion.submit();
}else if(elemento.validity.patternMismatch ||
elemento.validity.valueMissing){ alert (‘el nombre de usuario debe tener mínimo de 3 caracteres’);
}
}
Listado 6-26. Usando estados de validación para mostrar un mensaje de error personalizado.
En el Listado 6-26, la función enviar () fue modificada para incorporar esta clase de control. El formulario es validado por el método checkValidity() y si es válido es enviado con submit(). En caso contrario, los estados de validación patternMismatch y valueMissing para el campo usuario son controlados y un mensaje de error es mostrado cuando el valor de alguno de ellos es true (verdadero).
Hágalo usted mismo: Reemplace la función enviar() en la plantilla del Listado 6-25 con la nueva función del Listado 6-26 y abra el archivo HTML en su navegador.
willValidate
En aplicaciones dinámicas es posible que los elementos involucrados no tengan que ser validados. Este puede ser el caso, por ejemplo, con botones, campos ocultos o elementos como <output>. La API nos ofrece la posibilidad de detectar esta condición usando el atributo willValidate y la sintaxis elemento.willValidate.
Los formularios constituyen el principal medio de comunicación entre usuarios y aplicaciones web. HTML5 incorpora nuevos tipos para el elemento <input>, una API completa para validar y procesar formularios, y atributos para mejorar esta interface.
Tipos
Algunos de los nuevos tipos de campo introducidos por HTML5 tienen condiciones de validación implícitas. Otros solo declaran un propósito para el campo que ayudará a los navegadores a presentar el formulario en pantalla.
email Este tipo de campo valida la entrada como una dirección de email. search Este tipo de campo da información al navegador sobre el propósito del campo (búsqueda) para ayudar a presentar el formulario en pantalla. url Este tipo de campo valida la entrada como una dirección web.
tel Este tipo de campo da información al navegador sobre el propósito del campo (número telefónico) para ayudar a presentar el formulario en pantalla. number Este tipo de campo valida la entrada como un número. Puede ser combinado con otros atributos (como min, max y step) para limitar los números permitidos. range Este tipo de campo genera un nuevo control en pantalla para la selección de números. La entrada es limitada por los atributos min, max y step. El atributo value establece el valor inicial para el elemento.
date Este tipo de campo valida la entrada como una fecha en el formato año-mes-día. month Este tipo de campo valida la entrada como una fecha en el formato año-mes. week Este tipo de campo valida la entrada como una fecha en el formato año-semana donde el segundo valor es representado por una letra W y el número de la semana. time Este tipo de campo valida la entrada como una hora en el formato hora:minutos:segundos. También puede tomar otras sintaxis como hora:minutos. datetime Este tipo de campo valida la entrada como fecha y hora completa, incluyendo zona horaria.
datetime-local Este tipo de campo valida la entrada como una fecha y hora completa, sin zona horaria.
color Este tipo de campo valida la entrada como un valor de color.
Atributos
Nuevos atributos fueron también agregados en HTML5 para mejorar la capacidad de los formularios y ayudar al control de validación.
autocomplete Este atributo especifica si los valores insertados serán almacenados para futura referencia. Puede tomar dos valores: on y off.
autofocus Este es un atributo booleano que enfoca el elemento en el que se encuentra cuando la página es cargada.
novalidate Este atributo es exclusivo para elementos <form>. Es un atributo booleano que establece si el formulario será validado por el navegador o no. formnovalidate Este atributo es exclusivo para elementos de formulario individuales. Es un atributo booleano que establece si el elemento será validado por el navegador o no. placeholder Este atributo ofrece información que orientará al usuario sobre la entrada esperada. Su valor puede ser una palabra simple o un texto corto, y será mostrado como una marca de agua dentro del campo hasta que el elemento es enfocado. required Este atributo declara al elemento como requerido para validación. Es un atributo booleano que no dejará que el formulario sea enviado hasta que una entrada para el campo sea provista.
pattern Este atributo especifica una expresión regular contra la cual la entrada será validada.
multiple Este es un atributo booleano que permite ingresar múltiples valores en el mismo campo (como múltiples cuentas de email, por ejemplo). Los valores deben ser separados por coma.
form Este atributo asocia el elemento al formulario. El valor provisto debe ser el valor del atributo id del elemento <form>.
list Este atributo asocia el elemento con un elemento <datalist> para mostrar una lista de posibles valores para el campo. El valor provisto debe ser el valor del atributo id del elemento <datalist>.
HTML5 también incluye nuevos elementos que ayudan a mejorar y expandir formularios.
<datalist> Este elemento hace posible incluir una lista de opciones predefinidas que será mostrada en un elemento <input> como valores sugeridos. La lista es construida con el elemento <option> y cada opción es declarada con los atributos value y label. Esta lista de opciones se relaciona con un elemento <input> por medio del atributo list. <progress> Este elemento representa el estado en la evolución de una tarea (por ejemplo, una descarga).
<meter> Este elemento representa una medida, como el tráfico de un sitio web.
<output> Este elemento presenta un valor de salida para aplicaciones dinámicas.
Métodos
HTML5 incluye una API específica para formularios que provee métodos, eventos y propiedades. Algunos de los métodos son:
setCustomValidity(mensaje) Este método nos permite declarar un error y proveer un mensaje de error para un proceso de validación personalizado. Para anular el error, debemos llamar al método con una cadena de texto vacía como atributo. checkValidity() Este método solicita al navegador iniciar el proceso de validación. Activa el proceso de validación provisto por el navegador sin la necesidad de enviar el formulario. Este método retorna true (verdadero) si el elemento es válido.
Los eventos incorporados para esta API son los siguientes:
invalid Este evento es disparado cuando un elemento inválido es detectado durante el proceso de validación.
forminput Este evento es disparado cuando un formulario recibe la entrada del usuario. formchange Este evento es disparado cuando un cambio ocurre en el formulario.
API Forms provee un grupo de atributos para controlar estados en un proceso de validación personalizado.
valid Este estado es un estado de validación general. Retorna true (verdadero) cuando ninguno de los estados restantes es true (verdadero), lo que significa que el elemento es válido.
valueMissing Este estado es true (verdadero) cuando el atributo required fue incluido en el elemento y el campo está vacío.
typeMismatch Este estado es true (verdadero) cuando la entrada no es el valor esperado de acuerdo al tipo de campo (por ejemplo, cuando se espera un email o una URL). patternMismatch Este estado es true (verdadero) cuando la entrada no es un valor admitido por la expresión regular especificada con el atributo pattern. tooLong Este estado es true (verdadero) cuando el largo de la entrada es mayor que el valor especificado en el atributo maxlength.
rangeUnderflow Este estado es true (verdadero) cuando la entrada es menor que el valor declarado para el atributo min.
rangeOverflow Este estado es true (verdadero) cuando la entrada es mayor que el valor declarado para el atributo max.
stepMismatch Este estado es true (verdadero) cuando el valor declarado para el atributo step no corresponde con los valores en los atributos min, max y value. customError Este estado es true (verdadero) cuando un error personalizado fue declarado para el elemento.