unijimpe

En las ultimas versiones de Mootools se ha comenzado a incluir la clase Form.Validator la cual permite validar formularios de forma sencilla con muchas opciones predefinidas y con la posibilidad de extender con nuevas reglas de validación.

Preparando para Validar con Mootools

Lo primero es descargar e incluir el archivo mootools.js en nuestro documento, también se necesita descargar e incluir el archivo mootools-more.js que debe contener las clases: Form.Validator y Form.Validator.Inline.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/mootools-more.js"></script>

También es necesario agregar tres estilos para indicar al usuario el resultado de la validación, estos estilos los creamos en la hoja de estilos de nuestro sitio web donde obviamente los colores y estilos los haremos para que se integren con nuestra web.

.validation-passed { border-color: blue; } /* campo valido */
.validation-failed { border-color: red; } /* campo invalido */
.validation-advice { color: #C00; font-size: 10px; } /* mensaje de error */

Validaciones Disponibles

Lo primero es conocer todas las formas de validación disponibles

• IsEmpty: devuelve verdadero si el campo esta vacío.
• required: el campo debe ser obligatorio o no debe estar vacío.
• minLength: verdadero si campo tiene mas de cierta cantidad de caracteres.
• maxLength: devuelve verdadero si el campo tiene menos de cierta cantidad de caracteres.
• validate.numeric: verdadero si el campo es un número
• validate.integer: verdadero para números enteros, decimales no esta permitidos.
• validate.digits: verifica si el campo contiene números, espacios y caracteres de puntuación.
• validate.alpha: verdadero si el campo solo contiene letras.
• validate.alphanum: el campo es verdadero si contiene unicamente letras y números.
• validate.date: es verdadero si el campo contiene una fecha (mm/dd/yyyy).
• validate.email: verifica que el campo contenga un dirección de email.
• validate.url: verifica que el campo contenga una dirección URL.

Utilizando Form.Validator

Para utilizar las formas de validación antes mencionadas estas se deben agregar como si fueran estilos. Si deseamos aplicar mas de una regla podemos hacerlo dejando un espacio en blanco. Veamos un ejemplo de un formulario de registro.

<form id="frRegister" method="post" action="">
Name: 
<input name="name" type="text" id="name" class="required" />
Username:
<input name="user" type="text" id="user" class="required validate-alphanum minLength:5" />
Password:
<input name="pass" type="text" id="pass" class="required validate-alphanum" />
Email:
<input name="email" type="text" id="email" class="required validate-email" />
Phone:
<input name="phone" type="text" id="phone" class="validate-digits" />
<input type="button" name="btsend" id="btsend" value="Registro" />
</form>

En el código mostrado hemos creado un formulario con 5 campos, a los cuales hemos aplicado las siguientes reglas:

– name: debe ser obligatorio y se acepta todos los caracteres.
– user: es obligatorio, solo se aceptan letras y números y deber de 5 caracteres como mínimo.
– pass: es obligatorio y solo se aceptan letras y números.
– email: el texto ingresado debe ser una dirección de email válida y no puede ser vacía.
– phone: campo opcional, pero si se llena solo acepta números, espacios y caracteres de puntuación.

Luego creamos una instancia del objeto Form.Validator que recibe como parámetro el identificador del formulario que deseamos validar, en seguida agregamos un evento al botón ‘btsend‘ el cual procederá a la validación cuando se haga click para enviar el formulario.

window.addEvent('domready', function() {
	var validate = new Form.Validator("frRegister");
	$('btsend').addEvent('click', function() { 
		validate.validate();
	});
});

Uniendo estos bloques de código tenemos nuestro primer ejemplo de validación con Mootools, podemos ver el resultado en Mootools: Form.Validator – Basic.

Utilizando Form.Validator.Inline

Si deseamos que al validar el formulario este muestre los mensajes de error junto a cada campo, de esta forma el usuario sabra exactamente cual es el error que tiene en el formulario. Para ello utilizaremos la clase Forma.Validator.Inline la cual tiene la misma sintaxis que el ejemplo anterior:

window.addEvent('domready', function() {
	var validate = new Form.Validator.Inline("frRegister");
	$('btsend').addEvent('click', function() { 
		validate.validate();
	});
});

Pueden ver el ejemplo funcionando en Mootools: Form.Validator.Inline y como se puede apreciar esta validación es mucho mas intuitiva para el usuario.

Mostrando la validación en nuestro Idioma

Por defecto los mensajes de la validación se muestran en Ingles, si deseamos cambiar de idioma por ejemplo a Español a estos mensajes entonces debemos incluir la clase Form.Validator.Spanish y luego inicializar en Mootools de la siguiente forma:

window.addEvent('domready', function() {
	MooTools.lang.setLanguage("es-ES");
	validate = new Form.Validator.Inline("frRegister");
	$('btsend').addEvent('click', function() { 
		validate.validate();
	});
});

Pueden ver el resultado del ultimo ejemplo en Mootools: Form.Validator.Spanish en donde las validaciones se muestran en Español.

Si estas opciones de validación no son suficientes puedes utilizar una clase adicionar con mas opciones de validación las cuales están documentadas en Additional InputValidators.

Resumiendo: para validar formularios con Mootools se deben descargar las clases adicionales Form.Validator y Form.Validator.Inline, crear los tres estilos para mostrar las validaciones, aplicar las reglas de validación como si se trataran de estilos. Finalmente se agrega una instancia de la clase Form.Validator para realizar las validaciones.

[download id=»41″ autop=»false»]

Mas Información

• Mootools – Class: Form.Validator
• Mootools – Additional InputValidators
• Mootools – Class Instance: MooTools.lang
• More than Meets the Eye: Form Validator
• Mootools FormValidator – How to use

Posts Relacionados

• Vanadium: Validar formularios fácilmente
• PHP con MySQL: Insertar datos en MySQL
• Mootools Calendar
• AutoClear en Formularios HTML
• Swiff: Mootools Flash Plugin