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.
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.
Mas Información
Comentarios Total 8 comentarios
Publicado: 04/06/2010 9:36 am
Perdón pero de js y php conozco muy poco. Una vez que valida y que todo está bien, cómo hago para que envíe el formulario?
Publicado: 11/06/2010 1:44 pm
ya lo averigüé, gracias igual. Saludos.
Publicado: 13/06/2010 7:37 am
Buenas, ¿podrías indicar cómo has hecho para que envie el formulairo una vez esté validado? Había pensado que simplemente indicando en el campo “action” del form la dirección funcionaría, pero no es así.
Gracias.
Publicado: 23/06/2010 9:21 am
Te copio el código LUIS, a ver si sale bien
<script type="text/javascript">
window.addEvent('domready', function() {
var validate = new Form.Validator.Inline("frRegister");
$('btsend').addEvent('click', function() {
if(validate.validate())
{
$('frRegister').submit();
}
});
});
</script>
Publicado: 24/06/2010 5:27 pm
Funciona perfectamente. Muchas gracias.
Publicado: 29/06/2010 11:06 am
Muy bueno el articulo, pero omo se utiliza Additional InputValidators?
Publicado: 21/08/2010 10:54 pm
y tambien se puede validar los check y lo option? alguien sabe si se puede con este validador
Publicado: 21/08/2010 11:20 pm
Hola para validad campos del tipo checkbox o radio puedes utilizar la propiedad validate-required-check que permite validad si un campo del tipo checkbox o radio ha sido marcado.
<input type="checkbox" class="validate-required-check"/>Para mas información puedes leer http://mootools.net/docs/more/Forms/Form.Validator.Extras