Niquelao - Javascript

Retocando Formularios (Episodio II)

14 de September, 2006 por Rumoroso

Siguiendo con el patrón que nos marca este mes de frenética actividad “blogera post-vacacional”, ha llegado el momento de acudir al Episodio II de la archiconocida saga “Retocando Formularios”.

El episodio de hoy nos presenta un script que comprueba antes del envio del formulario si se han rellenado todos los campos obligatorios. En caso negativo… hace cosas muy chulas…

Planteamiento

Crear un script que reconozca los campos de formulario de obligada cumplimentación de la misma manera que lo reconocería el propio usuario (por ejemplo, lo del típico asterisco “*”).

El desarrollo

Partiendo de la idea de no aumentar el marcado del formulario con clases, identificadores, elementos,… que señalen al script lo que es obligatorio y de que el marcado utilizado es correcto y accesible (uso de elementos label asociados correctamente), se ha desarrollado un script que busca todos los label y reconoce en ellos la presencia del * (mundialmente conocido como * o “punto despeinado”).

El valor inicial de los campos obligatorios se almacena en una matriz. Esto permitirá comprobar posteriormente, antes del envío, si se ha modificado o no. También se almacenan la clase que tienen aplicados tanto el label como el campo obligatorio asociado. Esto último se hace para aplicar o restaurar (según sea el caso) una clase un otra en función de que la validación de como resultado el que uno de los campos no ha sido cumplimentado.

El script se ha creado teniendo en consideración la posible presencia de más de un formulario en la página (por ejemplo: un formulario de búsqueda en la barra de utilidades de la sección “formulario de contacto”).

Cuando se pulsa el botón de envío se realiza la comprobación. Si esta es positiva, el formulario se envía (lógicamente o de perogrullo). En el caso de ser negativa, se crea un párrafo con el mensaje que nosotros queramos y una lista con los campos que no han sido rellenados. Asimismo (casi pongo lo escribo como siempre: Así mismo), se aplica una clase al label y otra al campo obligatorio que lleva asociado un estilo declarado en la CSS.

Adicionalmente se ha añadido el comportamiento ya explicado en el Episodio I y que consiste en limpiar/restaurar los valores iniciales de los campos.

El ejemplo

En el caso de que os aburra tanta palabrería, podéis entreteneros con el ejemplo de funcionamiento que hemos desarrollado para este caso, o incluso podéis descargarlo (y sacarle “pegas”).

Problemas:

El resultado negativo de la validación crea contenido que se coloca al principio del formulario. Si estamos usando un lector de pantalla, este no lo leerá si no le mandamos para allí. Solucionado: Tras la creación de los elementos que avisan del error, se provoca un salto al inicio de estos (aprovechando la “id” del párrafo), con lo que lo siguiente que se leerá será el propio aviso seguido del formulario.

A pesar de su fama, no quiero utilizar el *. Solucionado: El script reconoce la presencia de lo que nosotros le indiquemos que busque. Además, se puede hacer que compruebe si se ha aplicado una clase concreta a los campos o a los label (muchas veces se destacan estos aplicando un estilo).

Supongo que habrá más problemas, por lo que si a alguien se le ocurre alguno… que nos lo diga. Mientras tanto seguiremos pensado que hacemos las cosas REMATADAMENTE bien…

Concluyendo

A partir de ahora, cuando se quiera crear un formulario y validar los campos obligatorios, no hará falta cambiar el marcado ni añadir “cosas raras”. Únicamente será necesario hacer un formulario correcto (según los estádares W3C) y asociarlo el script.

Postdata

Se me olvidaba decir que la accesibilidad no está comprometida si no funciona javascript.

Por cierto, la validación del formulario siempre se debe hacer también del lado del servidor (que no se os olvide).

Categoría: Javascript

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio.

• Artículo anterior: Internet Explorer 7 Release Candidate
• Artículo siguiente: Browsershots