domingo, 11 de octubre de 2015

API Forms en HTML - 2 de 2



  • Validación en tiempo real

Cuando abrimos el archivo con la plantilla del Código 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.

Código 6-25. Validando en tiempo real.

<!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,
false);
}
function cambiarrango(){
var salida=document.getElementById("rango");
var calc=edad.value-20;
if(calc<20){
calc=0;
edad.value=20;
}
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>

En el Código 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.

  • Propiedades de validación

En el ejemplo del Código 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:

Código 6-26. Usando estados de validación para mostrar un mensaje de error personalizado.

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');
}
}

En el Código 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 Código 6-25 con la nueva función del Código 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.


Referencia rápida

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 msmo 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>.

  • Elementos

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.

  • Eventos

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.

  • Estado

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.


Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada