Retocando Formularios (Episodio II)

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