Validación genérica de formularios con javascript
La validación de la entrada de datos en formularios siempre es un proceso laborioso y, en osasiones, tedioso. En esta entrada presentamos un sistema genérico para validación de formularios basado en javascript. Por supuesto, toda validación de formularios debe tener su parte en el servidor: no podemos confiar en que el usuario tenga habilitado javascript, por lo que siempre es necesario realizar una validación en el servidor antes de operar con los datos que provienen de un formulario recién enviado.
Podemos preguntarnos entonces para qué validar con javascript. La respuesta es que javascript (si está activado) nos ofrecerá una validación in situ, antes de enviar el formulario, con la que el usuario podrá comprobar inmediatamente si lo que está introduciendo es válido según nuestros requisitos.
En el lab se encuentra una demostración de nuestro sistema de validación genérica.
El sistema se compone de un objeto javascript llamado Validation que será instanciado recibiendo un objeto en formato JSON que indica, a través de sus ID, qué campos son obligatorios y de qué tipo deben ser, además de sus longitudes máxima y mínima.
En nuestro ejemplo, tenemos un formulario con tres campos, nombre, dirección y e-Mail, siendo nombre y e-Mail obligatorios.
Creamos un objeto fields de la siguiente forma:
var fields = { fieldset:[ { id: 'name', name: 'Nombre', type: 'string', min: 5, max: 20 }, { id: 'email', name: 'e-Mail', type: 'email', min: 5, max: 255 } ] };
Tras esto, instanciamos el objeto Validation:
var v = new Validation(fields);
Una vez hecho esto, tenemos el ambiente perfecto para validar nuestro formulario. En la etiqueta form, añadimos un manejador del evento submit:
onsubmit="v.validate(this); return false;"Nótese que cada campo de formulario que queremos que sea obligatorio tiene una etiqueta span con un ID igual al ID del campo obligatorio más la cadena “-display”. Esto sirve para que el objeto Validation identifique a qué lugar debe enviar la salida del error en caso de que se produzca.
Por supuesto, el formulario no se envía hasta que todos los requisitos del formulario estén cubiertos, es decir, hasta que los campos obligatorios se han rellenado correctamente.
En este momento tenemos funcionando el sistema con campos de tipo texto y de correo electrónico, pero estamos trabajando para ampliarlo a campos numéricos enteros, decimales y cadenas con formato.
Una nota importante: el objeto usa las funciones String.trim() y String.checkEmail() que hemos situado en un archivo llamado Common.js y cuya implementación puede verse aquí.
Como siempre, el código completo del ejemplo para descargar aquí.