VALIDANDO ANDO Y NO ME VOY QUEJANDO (PARTE 3. VALIDATE.JS)

<script src=”my own” title=”parte 3 validate.js”>

Para que no se pierda la secuencia, en el post anterior había realizado las validaciones de éste formulario con Javascript trocho y mocho. Siempre es bueno volver a lo básico, dicen que es bueno para el alma del programador, dicen…

Suele suceder que hay una gran cantidad de librerías que validan formularios. vía Javascript o son “wrappers” o extensiones de otras librerías. Sin embargo, estas librerías casi siempre están atadas a un framework (como el caso de jQuery Validate, que de ella hablaré en un próximo post), pero existen algunas como la librería Validate.js que esta bastante chida porque utiliza JSON para escribir las validaciones y personalizarlas al máximo.

Para el caso que cabe, en nuestro formulario, basta con descargar la librería e incluirla en nuestra página como se haría normalmente:

<script src="validate.min.js"></script>

Luego escribimos las validaciones de acuerdo a los parámetros de la librería. Revisa los post anteriores para saber a que corresponden estas validaciones:

var validacion = new FormValidator('datosPersonales', [
	{ name: 'nombre', rules: 'required|alpha'},
	{ name: 'apellido', rules: 'required|alpha'},
	{ name: 'direccion', rules: 'required|callback_verificarDireccion'},
	{ name: 'correo', rules: 'required|valid_email'},
	{ name: 'edad', rules: 'required|integer'},
	{ name: 'sexo', rules: 'required'},
	{ name: 'cine', rules: 'callback_verificarActividades'},
	{ name: 'teatro', rules: 'callback_verificarActividades'},
	{ name: 'radio', rules: 'callback_verificarActividades'}
], function(errors, event){
	if (errors.length > 0){
	//muestra el primer mensaje de error encontrado
		alert(errors[0].message);
	}
});
validacion.registerCallback('verificarDireccion', function(value){
	return value.match(/[a-z 0-9]+/ig) ? true : false;
});
validacion.registerCallback('verificarActividades', function(value){
	return (!document.datosPersonales.cine.checked && !document.datosPersonales.teatro.checked && !document.datosPersonales.radio.checked) ? false : true;
});
validacion.setMessage('verificarDireccion', 'Debe introducir sólo letras, números o espacios en el campo %s');
validacion.setMessage('verificarActividades', 'Debe seleccionar al menos una actividad');

Estas validaciones deben escribirse después de la codificación del formulario (etiqueta de cierre de formulario), ya que la librería necesita saber que el formulario está cargado antes de validarlo, es bastante código, pero afortunadamente se explica muy bien. Al constructor FormValidator() de la librería se le pasan tres parámetros: el nombre del formulario (el valor en el atributo name), el objeto JSON con las validaciones a realizar y una función anónima que es la que va a manejar los errores si los hubiere, junto con el evento onsubmit (de forma obligatoria). La lógica de dicha función anónima es bastante sencilla, puesto que la librería tiene un arreglo llamado errors que almacena todos los errores encontrados en el proceso de validación (uno por cada campo validado).

Los métodos registerCallback() y setMessage() se utilizan para manejar validaciones personalizadas y los mensajes que deben retornar dichas validaciones, respectivamente. Es necesario destacar que las funciones pasadas como parámetro, deben tener el prefijo 'callback_' mas el nombre de la función personalizada, y debe retornar true o false dependiendo de si la lógica para validar el campo, cumple con lo programado o no.

¿Recuerdan el dolor de cabeza al validar los checkboxes? Pues acá se usa el método registerCallback() para encapsular la lógica de nuestra validación realizada anteriormente. Esta librería cuenta con mensajes predefinidos en inglés para cada regla, personalizables con el método setMessage(). Para más información pueden consultar la documentación de la librería en su página oficial.

¡A validar se ha dicho! 😉
</script>

Anuncios