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

       

Etiquetas

Academy (23) Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (18) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (195) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (297) Cloud Computing (3) CNNA v5.0 Routing & Switching (216) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos (3) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (169) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google