Js api formularios

1.  Formularios en HTML

•  La Web 2.0 está enfocada hacia el usuario. Los formularios web permiten a los usuarios insertar datos, tomar

decisiones, comunicar información y cambiar el comportamiento de una aplicación.

•  El elemento <form> permite crear la estructura del cuestionario. Este elemento admite otros dos atributos nuevos: Ø  Autocomplete: puede tomar dos valores, on (defecto) y off. Cuando está en off los usuarios tendrán la

función de autocompletar desactivada, sin mostrar entradas previas. Puede ser insertado en cualquier elemento input.

Ø  Novalidate: los formularios en HTML5 son autovalidados. Para evitar este comportamiento podemos usar este atributo. Para lograr lo mismo con los elemento input existe otro atributo llamado formnovalidate. Ambos son atributos booleanos.

•  El elemento input permite al usuario introducir datos en la web. El atributo type determina qué clase de entrada es esperada desde el usuario: text, password, submit, search, url, tel, number, range, date, week, month, time, datetime, datetime-local, color.

•  Además de los elementos y atributos mencionados, HTML5 incorpora otros nuevos. Los atributos más relevantes son: required, multiple, autofoucs, placeholder, pattern, y form. Los elementos más relevantes son: datalist, progress, meter, output.

API Formularios Francesc Pérez Fdez

2.  Elemento Type


Formulario.html

Autovalidación

Autocompletar

3.  Nuevos atributos


Solo admite un nombre de 8 letras compuesto por letras minúsculas del abecedario. Case-sensitive.

Podemos introducir múltiples direcciones electrónicas separadas por una coma.

4.  Nuevos elementos


5.  API Forms: librerías JS para formularios

•  Los formularios de HTML5 cuentan con su propia API para personalizar todos los aspectos de procesamiento y validación. Podemos crear campos especiales como pattern, pero cuando se trata de aplicar mecanismos complejos de validación (combinando campos o comprobando los resultados de un cálculo) deberemos recurrir a esta API.

•  Mecanismos de validación complejos: Ø  Método setCustomValidity(mensaje): con este método podemos personalizar el mensaje que se

mostrará por pantalla cuando un formulario es enviado.


El 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 dos escuchas para ambos elementos input y llama a la función validación. El mensaje declarado para el error con este método será visible sólo cuando el usuario intente enviar el formulario.


Ø  Evento invalid: cuando el usuario hace clic sobre 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().


Longitud max. 10 letras

Evento disparado cuando el contenido de los campos es modificado

Método que solicita al navegador que realice el proceso de validación.

Método tradicional de envío de formularios

Retorna una referencia al elemento input inválido y cambia el color de fondo

Letras de la A a la Z Letras de la a a la z Mínimo tres letras


Ø  En tiempo real: hasta el momento los campos son solo validados cuando el botón ingresar es presionado. 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.



•  El objeto ValidityState retorna el estado de un elemento considerando cada uno de sus posibles estados de validación. Existen ocho posibles estados de validación: elemento.validity.estado Ø  valueMissing: true cuando el atributo required fue declaro y el campo está vacío Ø  typeMissingmatch: true cuando la sintaxis utilizada en el campo no es la correcta Ø  paterrnMismatch: true cuando la entrada no corresponde con el patrón provisto por el atributo pattern Ø  tooLong: true cuando el maxlength fue declarado y el tamaño del campo excede dicho valor Ø  rangeUnderflow: true cuando el min fue declarado y el tamaño del campo es inferior a dicho valor Ø  rangeOverflow: true cuando el max fue declarado y el tamaño del campo es superior a dicho valor Ø  stepMismatch: true cuando el step fue declarado y su valor no corresponde con atributos como min,

max, lenth. Ø  customError: true cuando declaramos un error personalizado usando el método setCustomValidity() Ø  Valid: true cuando el resto de estados de validación son false.

•  Ampliando el código anterior con las siguientes líneas en la función enviar podemos ver el uso de los diferentes estados de validación.


Education

Js api formularios