Tag Archives: etiquetas

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.

Validacion con Mootools

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.

Un básico copia y pega de un formulario de contacto accesible

Una buena manera de aprender acerca de accesibilidad es a través de ejemplos y discusiones. En este post trataré de traducir las reglas WCAG -algunas-veces-difíciles-de-obtener en un ejemplo real de un formulario de contacto. Puede mirar el enlace de prueba, bajar el código y/o continuar leyendo un poco más.

Como mencioné antes, los formularios de contacto son una gran necesidad especial para mantenerse accesible. Y parece que siempre hay lugar para mejoras – en caso de que tengas sugerencias o su aproximación es diferente, me encantaría escuchar de usted.

Formulario de contacto simple con 4 campos y validación PHP en el servidor

Mi sugerencia es un formulario de contacto simple con 4 campos con validación PHP en el servidor. Luego de que el usuario envíe la información requerida, la página es cargada de nuevo y nuevos mensajes son mostrados dependiendo de la acción del usuario. Por supuesto que usted sabe que la forma necesita una etiqueta

<label for="name">

y algún tipo de validación – todos escriben acerca de la necesidad de mostrar una forma accesible con campos requeridos y además los mensajes de error (usualmente indicando que faltan algunos campos) – pero pocos ofrecen un código simple y directo para copiar y pegar en nuestros sitios.
Formulario de contacto accesible

El código

La hoja de estilo es bastante ligera – debemos darle estilo al formulario, pero la novedad es una clase para los campos que son requeridos y aún no han sido llenados.

.faulty_field,.validation-failed	{
   background:#fff4f4;
   color:#ff0000;
   border:1px solid #ff0000;
}

De esta manera, luego de que validemos, retornaremos el mensaje de error con enlaces a los campos que faltan pero además lo resaltamos para una experiencia mas usable e intuitiva. La parte de PHP lee las entradas, las verifica, y mira si las requeridas fueron llenadas. Un mensaje de agradecimiento se muestra en caso de que el usuario llene todos los campos requeridos.

El número de campos pueden ser incrementados, pero no olvide validarlos – cuando alguien entiende cómo los formularios funcionan y cuales fueron los elementos de accesibilidad que fueron incluidos construyendo formularios más complejos se convierte sólo en una cuestión de tipearlos.