Programatik

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

Enlaces

He aquí un par de extensiones a través del prototipado del tipo String en javascript:

trim

Elimina espacios sobrantes al principio y al final de una cadena.

String.prototype.trim = function() {
	return this.replace(/^s+|s+$/, '');
};

Su uso es de la forma que sigue:

var cadena = "      texto de prueba     ";
 
var cadenaSinEspacios = cadena.trim();

Comprobar si un email es válido

Es bastante obvio.

String.prototype.checkEmail = function() {
	var re = /^(([^<>()[].,;:s@\"]+(.[^<>()[].,;:s@\"]+)*)|(\".+\"))
	@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])
	|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
	return this.match(re);
}

En la Red podemos encontrar bastantes ejemplos de menús de tipo acordeón, muchos de ellos usando jQuery o Mootools.

No obstante, muchos de ellos presentan elementos h3 con elementos div de manera que los h3 reaccionan al click mostrando u ocultando los div.

Si lo que queremos es utilizar una jerarquía de opciones en una lista anidada de elementos ol o ul, podemos hacerlo como se muestra en el lab.

Lo único a tener en cuenta es esta línea de código:

new Accordion($$(A), $$(B));

donde A es el conjunto de elementos disparadores (en nuestro caso, los enlaces .main_section y B es el conjunto de elementos a mostrar y ocultar (en nuestro caso, los bloques .submenu).

El código, como siempre, para descargar aquí.

Enlaces