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);
}

Necesitábamos un medio rápido y fácil de utilizar para crear un scroll automático en un elemento div. Después de haber visto algunas soluciones ya hechas nos dimos cuenta de que la personalización de las mismas nos iba a dar más trabajo que escribir nuestra propia solución.

Pensamos que sería mejor disponer de un objeto javascript con el que pudiéramos indicar sobre qué capa hacer scroll, independientemente del contenido que tuviera.

La idea era poder hacer

scroll = new Scroll(’mi_capa’, 1);

donde mi_capa es el id asignado a la capa sobre la que hacer scroll y 1 es la velocidad del scroll.

La solución puede verse en el lab.

El código del ejemplo para descargar, aquí.

Enlaces