Js api formularios

1,116 views

Published on

Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_5_formularios.html

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,116
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Js api formularios

  1. 1. API Formularios Francesc Pérez Fdez 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.                                                                                    
  2. 2. API Formularios 2.  Francesc Pérez Fdez Elemento Type Autovalidación Autocompletar Formulario.html
  3. 3. API Formularios 3.  Francesc Pérez Fdez 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. 4. API Formularios 4.  Francesc Pérez Fdez Nuevos elementos
  5. 5. API Formularios Francesc Pérez Fdez 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.
  6. 6. API Formularios 5.  Francesc Pérez Fdez API Forms: librerías JS para formularios Ø  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(). Evento disparado Método que solicita Método tradicional cuando el contenido al navegador que de envío de de los campos es realice el proceso formularios modificado de validación. Letras de la A a la Z Letras de la a a la z Mínimo tres letras Retorna una referencia al elemento input inválido y cambia el color de fondo Longitud max. 10 letras
  7. 7. API Formularios 5.  Francesc Pérez Fdez API Forms: librerías JS para formularios Ø  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.
  8. 8. API Formularios Francesc Pérez Fdez 5.  API Forms: librerías JS para formularios •  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.

×