Validación en el cliente con Mootools para formularios accesibles

Tal como discutimos en el artículo anterior acerca de formularios -Un básico copia y pega de un formulario de contacto accesible -  hicimos la validación del formulario usando una clase que resalta y nos indica los elementos que necesitan ser llenados o corregidos en caso de que la validación haya fallado.

Ahora, el único punto débil desde el punto de vista del usuario es el hecho de que necesitamos recargar la página cada vez que se haga click en submit y esto es de alguna forma fastidioso. Hoy en día la mayoría de los navegadores ofrecen capacidades de procesamiento en el lado del cliente (javascript) que puede ser usado para validación local – evitando recargar la página.

No me malinterpreten, la parte del lado del servidor necesita permanecer intacta para propósitos de accesibilidad.

La versión mas reciente de MooTools ofrece agregados de validación en el paquete “mootools-more”, que nos ayudará a resolver nuestras tareas. Básicamente necesitamos añadir algunas clases para dar salida a las entradas, para reflejar el tipo de validación que queremos. Para nuestro formulario sólo necesitamos un nombre – obligatorio, y correo electrónico – obligatorio + formato correcto de correo electrónico.

Así que usaremos requerido: required y validar email: validate-email de la lista de validadores que se encuentran incluidos, así:

<label for="name">Name <span>(required)</span></label>
<input  tabindex="1" type="text" name="name" id="name" class="required" />
<label for="mail">Email <span>(required)</span></label>
<input  tabindex="2" type="text" name="mail" id="mail" class="validate-email required" />

Crear el código que haga la validación

En el evento domready de la ventana (necesitamos permitir al html cargar y entonces será capaz de acceder a él), nosotros adjuntamos el validador a nuestro formulario con los métodos necesarios para mostrar al usuario lo que ha hecho mal (en caso de que lo haya hecho). Para mantener la presentación y la accesibilidad intacta – como en la validación definitiva – añadiremos el siguiente código:

window.addEvent('domready', function(){
 
var myFormValidator = new FormValidator($('contact'), {
 
onFormValidate: function(ok) {
 if (!ok) {
  $('error_wrapper').getElements('a').dispose();
  if (!ok) {
 
   $('contact').getElements('.validation-failed')
   .each( function(el) {
      var a = new Element( "a",{'href' : "#add"})
      .addEvent('click', function(){ el.focus(); return false; })
      .set('text', el.get('id').capitalize() )
      .inject($('error_wrapper'));
 
  })
 
 $('error_wrapper').setStyle('display','block');
 }
 else {
   $('error_wrapper').setStyle('display','none');
 }
 
}
},
stopOnFailure:true,
evaluateFieldsOnBlur:false
 
});
 
})

Ok, es un poco largo, pero básicamente está validando cada campo que se necesite, tal como se especifica en la clase, y adjunta en la envoltura del error (error_wraper) las etiquetas para las entradas erróneas. Es mejor estudiar el código fuente para ver cómo está hecho.

Validación en el cliente con Mootools

La librería de Mootools está validando cada campo que le especificamos en el evento enviar (submit) del formulario y añade predeterminadamente una clase validation-failed o validation-passed a cada campo que fue enviado a la rutina de validación.

Podemos usar esas dos clases para mejorar visualmente al formulario – aquí sólo hice que los fallidos fuesen rojos. Si la validación fallare, el evento enviar (submit) de la forma será detenido y los datos incompletos no alcanzarán a llegar al servidor.

Próximo paso: completar la data correctamente y reenviar.

Aquí esta el DEMO

La clase validadora del formulario es mas poderosa que esta así que dale un vistazo a la documentación en el sitio de MooTools. De cualquier manera, no importa lo que haga, no olvide hacer la validación del lado del servidor también. Es obligatorio para la seguridad de su servidor.

Te recomendamos