Para desarrollar aplicaciones basadas en formularios, además de la manipulación dinámica de las filas de las tablas, es muy necesaria la validación de los campos del lado del cliente, es decir, impedir que un formulario se envie y se muestren al usuario los mensajes de error necesarios. Obviamente esto no reemplaza a la validación del lado del servidor.
Para esto y utilizando a Prototype voy a describir a continuación como utilizar la mejor (única ?) librería para este fin, desarrollada por Andrew Tetlaw.
Really easy field validation requiere que se incluya en el <head> de las páginas web el archivo validation.js además del prototype.js.
Tan pronto y se carga en el navegador el árbol del documento, se activa explícitamente la validación para cada uno de los formularios. Para este ejemplo se activa la validación del <form> cuyo id es formulario.
%MINIFYHTMLaed5e60067d5fc009c2540a6b085de762%Después de garantizado esto, se crea el <form> definiendo el tipo de validación que se realizará sobre sus campos, agregando las clases CSS que correspondan.
Para este caso, el campo name es requerido y sólo admite letras, el campo age es requerido y sólo admite números y el campo greeting es requerido y debe seleccionarse una de las opciones válidas.
Otros validadores predefinidos corresponden con la siguiente lista.
- required (no vacío)
- validate-number (un número válido)
- validate-digits (sólo digitos)
- validate-alpha (sólo letras)
- validate-alphanum (sólo letras y números)
- validate-date (una fecha válida)
- validate-email (una dirección de correo válida)
- validate-url (un URL válido)
- validate-date-au (una fecha con formato; dd/mm/yyyy)
- validate-currency-dollar (un valor de moneda)
- validate-selection (una opción válida seleccionada)
- validate-one-required (al menos un textbox/radio seleccionado)
Es posible definir nuevos validadores personalizados. Para esto consultar la información del método Validation.add.
Los mensajes de error (advices) que aparecen corresponden con los predefinidos por la librería, sin embargo es posible modificar este comportamiento de dos maneras.
1. Definir el bloque (p, div, etc.) que se desea se muestre en caso de no cumplirse la validación del campo.
<div id='advice-required-name' style="display: none">
Mensaje personalizado
</div>El id de este bloque deberá estar compuesto de la siguiente manera:
advice-NOMBRE_VALIDACIÓN-ID_ELEMENTO
El ejemplo anterior del mensaje personalizado corresponde con la validación required del campo name.
2. Mostrar como mensaje de error el contenido de los atributos title de los campos del formulario. Para activar esta opción es necesario especificar la siguiente opción cuando se está activando la verificación del formulario.
useTitles : trueEs posible evitar que la verificación del formulario se realice automáticamente durante el evento onSubmit y permitir un mayor control del evento de envío del formulario. Para hacer esto se debe desactivar esta opción especificando el siguiente código cuando se está activando la verificación del formulario.
onSubmit : truePosteriormente es posible solicitar la validación del formulario (val.validate()), reiniciar los validadores (val.reset()), validar un campo específico con los validadores definidos (Validation.validate(campo)) o con cualquier validador arbitrario (Validation.get('validator-name').test(elemento)).
Con respecto a la presentación, es posible manipular las siguientes clases CSS.
- validation-failed: Campos que no ya fueron verificados y no pasaron la validación.
- validation-passed: Campos que pasaron la validación.
- required: Campos requeridos, independientemente si han sido verificados o no.
- validation-advice: Mensaje de validación, no incluye a los mensajes personalizados (forma #1).
- advice-NOMBRE_VALIDACIÓN-ID_ELEMENTO: Mensaje de validación personalizado para un elemento y un tipo de validacion específicos.
Enlaces:
