Validar Formularios con Mootools

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.

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <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.

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

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.

  1. <form id="frRegister" method="post" action="">
  2. Name:
  3. <input name="name" type="text" id="name" class="required" />
  4. Username:
  5. <input name="user" type="text" id="user" class="required validate-alphanum minLength:5" />
  6. Password:
  7. <input name="pass" type="text" id="pass" class="required validate-alphanum" />
  8. Email:
  9. <input name="email" type="text" id="email" class="required validate-email" />
  10. Phone:
  11. <input name="phone" type="text" id="phone" class="validate-digits" />
  12. <input type="button" name="btsend" id="btsend" value="Registro" />
  13. </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.

  1. window.addEvent('domready', function() {
  2.     var validate = new Form.Validator("frRegister");
  3.     $('btsend').addEvent('click', function() {
  4.         validate.validate();
  5.     });
  6. });

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:

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

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:

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

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 18 comentarios


Juan Manuel
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?

Juan Manuel
Publicado: 11/06/2010 1:44 pm

ya lo averigüé, gracias igual. Saludos.

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

Juan Manuel
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>

Luis
Publicado: 24/06/2010 5:27 pm

Funciona perfectamente. Muchas gracias.

SM
Publicado: 29/06/2010 11:06 am

Muy bueno el articulo, pero omo se utiliza Additional InputValidators?

raoul
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

unijimpe
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

sergio
Publicado: 18/09/2010 1:08 am

Para que los errores o mensajes no salgan debajo de cada linea sino que arriba o abajo del form????

Luciana Lindström
Publicado: 15/11/2010 5:06 pm

Un genio, como siempre tan util !! GRACIAS!!


[…] desde el lado del cliente mediante una librería javascript para validar formulario (Por ejemplo: Validar Formularios con Mootools o también Vanadium: Validar formularios fácilmente). La segunda forma es hacerlo con PHP […]

cumanadigital
Publicado: 02/01/2011 7:38 pm

Excelente articulo. Tengo una consulta. Necesito validar un text para ingresar un valor numerico (real) y utilizo: – required validate.numeric –

Pero solo me valida si el campo esta vacio, ingreso caracteres y pasa la validacion.
Probe con 2required validate.integer” y funciona pero necesito validar un real.
He revisado la pagina de Mootools pero no consigo nada.

Daniel
Publicado: 29/04/2011 10:50 am

corre en IE ??? :)
muy buen aporte

SIGUEME20
Publicado: 20/08/2011 12:53 am

Hola .. estoy usando el Mootool-more .. pero con EXPLORER no funciona .. alguien que me ayude .. aqui les dejo mi pagina

http://admisionsanpedro.site11.com/preinscripcion.php

correo: romero_8957@hotmail.com

john fredy
Publicado: 10/10/2011 9:54 pm

Hola a todos implementé el Mootool-more en un formulario pero no puedo procesarlo con php
Alguien sabe cómo hacerlo

OK
Publicado: 14/10/2011 6:08 am

Post muy util, gracias !!!

Leonardo
Publicado: 11/08/2013 7:53 pm

Excelente tutorial, pero me gustaría muchísimo saber como puedo hacer para que los campos se validen al perder el foco es decir usando el onblur.
cualquier ayuda será bien recibida.

Muchas gracias.

www.informaticosadomicilio-sevilla.com
Publicado: 29/10/2014 4:04 am

Genial, justo lo que andaba buscando para validar los formularios de entrada a mis páginas web. Muy bueno el aporte.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)