Ajuste para jQuery.validationEngine

Uno de mis plugins favoritos de jQuery, es el jQuery.validationEngine. Un muy completo plugin para validación de formularios, muy customizable, desde el tipo de validación, hasta dónde debe aparecer el warning de error.

Pero hoy me pidieron algo que si lo trae por defecto, no lo encontré. El plugin ejecuta la validación de cada campo no sólo cuando el usuario hace el submit del formulario, también lo hace cuando el usuario termina de completar un campo y pasa al siguiente. De esta manera, permite corregir  lo erróneo en el momento.

Si se desea evitar esa validación al pasar de un campo al otro y dejarla activa sólo al hacer submit, uno debe hacer lo siguiente:


$(".registerform").validationEngine({
   bind: false
});

Hoy me pidieron que la validación al pasar de un campo a otro se haga sólo si el usuario empezó a escribir algo en el campo. Por defecto, si un campo es requerido, el usuario hace foco, no lo completa, pasa al siguiente, y se le muestra un error, ya que el campo es obligatorio y lo dejó sin completar.

Pero el pedido tiene sentido. No hace falta ejecutar esa validación del campo antes de siquiera empezar a completarlo. Y además, no debo perder la validación de campo requerido al hacer submit.

La mejor manera que encontré de hacer esta excepción fue editar jquery.validationEngine.js. Viendo el código, llegué a donde necesitaba editar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
   }, (event.data) ? event.data.delay : 0);
},

Aquí veo que se ejecuta la validación ante un evento del input (el cual se puede configurar mediante las opciones del plugin). Entonces, sólo debo ejecutar una verificación antes de validar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   if(field.val().length > 0){

      window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
      }, (event.data) ? event.data.delay : 0);

   }
},

Y listo. De esta manera, primero chequeo que haya en verdad algo que verificar antes de entrar al proceso de validación. Y como esto está atado sólo a eventos del input, al hacer submit del formulario se ejecutan siempre las reglas de validación.

UPDATE: subí estos cambios a GitHub, más detalles acá.

setInterval error en Chrome y Firefox

Hace unos días encontré un error en una animación que hice en jQuery, que hace uso de setInterval.  SetInterval existe para ejecutar una función cada determinada cantidad de tiempo. Supongamos que estoy en un sitio que hace uso de esta función, pero después voy a otro tab del browser, y me quedo navegando allí durante unos minutos, eso quiere decir que en otro tab (que no estoy viendo…) se debería estar ejecutando una función.

Firefox y Chrome evitan que las funciones con setInterval se ejecuten si uno está viendo otro tab. Tiene sentido, intentan ahorrar memoria para ponerla, justamente, donde el usuario esté mirando. El único problema es que en vez de hacer un «pause», lo que hacen es ir guardando todas las veces que se deberían ejecutar. Lo que provoca que cuando finalmente volvemos a hacer foco, se ejecutan una detrás de la otra!

La solución es increiblemente fácil cuando las funciones con setInterval involucran animaciones, como en mi caso.

Primero les muestro el código sin la corrección:

function magic(elemento){
	$(elemento).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Este código lo que hace es mover un div hacia la izquierda y abajo, y luego hacia la posición original, provocando un ligero temblor. Para ejecutarlo, uso por ejemplo:

setInterval("magic('.banner')",5000);

Lo que hace que cada 5 segundos, el div banner tiemble. Al perder el foco y luego volver al tab, la ejecuciòn en cadena hacia que el banner se fuera no 1, sino por ejemplo 200 pixeles hacia la izquierda (y hacia abajo…). Quedaba horrible por el hecho de quedar en cola de ejecución la función de temblor.

La solución es borrar lo que haya en memoria:

function magic(elemento){
	$(elemento).stop(true,true).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Así de simple…

Explorer atrasa

En mi vuelta al desarrollo web en relación de dependencia, me he vuelto a encontrar con un viejo conocido por todos aquellos que se dedican al diseño/programación/maquetación web: Internet Explorer 6.

Habiendo ya betas del IE9 dando vueltas, y estando en el mercado el IE7 e IE8 desde hace tanto tiempo ya, no tengo manera de imaginarme el tipo de usuario que elige al IE6 para navegar diariamente.

Justamente hoy, me entero de ie6countdown.com, una iniciativa que parte desde el mismísimo Microsoft.

Quienes me conocen saben la cantidad de luchas que le he ganado al IE6, como así también saben que ya no quiero hacer más nada compatible con este navegador.

Para todos aquellos que como yo aún deben «solucionar problemas» del IE6, les dejo un listado de herramientas que les pueden ser útiles:

  • Explorer 6: para testear, necesitamos el navegador. Antes solía usar Multiple-IE, pero hoy en día utilizo IETester, sobretodo por si lo que hay que testear es un formulario (los formularios en Multiple-IE no funcionan).
  • ie7.js Project: con este javascript convertimos al explorer 6 en casi casi un navegador en el que se puede maquetar un sitio web.
  • Companion JS: para cualquier versión de explorer, este javascript te permite tener un Firebug en el explorer, y hacer debug de javascript.

Hay miles de cosas más para testear y usar, acá les dejo un compilado más completo que el mío.

CSS y Javascript

En lo que a diseño web se refiere, este año los desarrolladores y maquetadores lo empezamos teniendo en mente HTML5 y CSS3. Uno piensa en la etiqueta <video> por ejemplo, y no puede más que gustarle eso. Después seguís soñando, y lo imaginás con jQuery. Genial. Por último, te acordás que la gente usa internet explorer, y te querés matar.

La curva de aprendizaje del usuario común en verdad no la conozco. Es muy fácil para mí y cualquier geek, imaginar que los usuarios de internet leen e investigan. Nada más lejos de la verdad. A los usuarios de internet, hoy en día lo único que les importa es Facebook, como hace tres años atrás le importaban Fotolog y MySpace, y más atrás aún, revisar su cuenta de email de Yahoo.

Como me gusta leer sobre maquetación, me encuentro con algún truco de CSS. El post está bueno, salvo con que no sirve para ie. Entonces, se usan un par de librerías en javascript que al cargarlas, «corrigen» lo que está mal en el navegador favorito por todos.

Y si directamente no hacemos nada para que se vea bien en IE?

Unicode para javascript

Para los que como yo quieren poner tildes en los alertas de javascript:

  • \u00e1 -> á
  • \u00e9 -> é
  • \u00ed -> í
  • \u00f3 -> ó
  • \u00fa -> ú
  • \u00c1 -> Á
  • \u00c9 -> É
  • \u00cd -> Í
  • \u00d3 -> Ó
  • \u00da -> Ú
  • \u00f1 -> ñ
  • \u00d1 -> Ñ

Firefox 3

Hoy es/fue el Download Day de Firefox 3. Para los que no saben, te invitaban a bajar en navegador hoy para establecer un record Guinness.

Ya lo baje en el laburo, y estoy haciendo lo mismo en casa. Pero acá no lo voy a instalar aún, porque lo mejor que tiene Firefox son las extensiones, y con esta versión no son compatibles las que más uso, como el Firebug.

En cuanto estén (que calculo será mañana, o a lo sumo pasado) lo instalaré acá también.

Todavía no pude testearlo a fondo, pero ya vi es que no se llevó para nada bien con Mootools, especialmente con el nuevo header en el que tanto trabajé estos días.

Habrá que ver… si mal no recuerdo, al salir el Firefox 2 en menos de una semana había una actualización.

Ctrl + F5

Era hora de emprolijar el sitio, y qué mejor que un fin de semana largo para esto. Toquen Ctrl+F5 si estuvieron hace poco, porque sino no les va a funcionar nada.

Saqué la cabecera con la imagen en random, es suficiente con la que está en la home… aparte no lograba motivar al público a ver el resto de las galerías. O sea, tengo muchas visitas paracaídas, que entran directamente a la página de una de las imágenes (especialmente la de Jack Skellington) y no ve el resto.

La actual cabecera está hecha con Mootools, un framework en javascript que ya vengo usando y del que debería indagar más.

El mejor cambio es el que vine haciendo de a poco, unificando la estética de todo el sitio. Por algún motivo que desconozco, usé varios recursos gráficos para mostrar cosas similares en distintas partes del sitio. Supongo que habrá sido por no hacerlo de punta a punta, habiendo hecho otros sitios en el medio. Todavía falta un poco más de esto, pero los cambios eran los suficientes como para poner todo online.

Al día

Me llevó todo el domingo leer los cientos de post que acumulé durante las últimas ¿3 semanas? Este es uno del motivos de mi posteo anterior, me gustaría dedicar tiempo a leer los post del día durante la semana, pero terminaba cansado como para ponerme a leer todo.

Como es de esperar de un blogger (no sé si entro del todo en esta categoría), leo blogs que escriben sobre blogs. Y la verdad, tengo que depurar eso. Le doy la razón a Fabio en que la peor categoría es la que eligen Adsense como tema de lectura.

Cuando me preguntan sobre posicionamiento-Google-Adsense les hablo sobre mi experiencia con este sitio, en donde sin ser un gran posteador, sin tener en cuenta las palabras claves, sin hablar del iPhone, ni tantas otras cosas, mi sitio no sólo está indexado como corresponde, sino que no se vuelve una tarea imposible encontrarme en la web. No hice nada especial para ello, de hecho, debería dedicarme más a generar contenido. Porque si hay algo que no hago es copy/paste de otros sitios. Aparte de que tengo ideas para ampliar este sitio, pero por ahora no puedo dedicarme.

Volviendo un poco sobre lo que estuve leyendo, el spam siempre será motivo de queja, y cómo agregan y desarrollan mejores captchas. En breve estaremos relanzando el sitio de Cadmus, con el mejor captcha que encuentro, formularios en flash. Flash lo tienen instalados todos, y me parece un buen lugar en donde utilizarlo.

Y ya que me fui para el lado del desarrollo, AJAX está bueno, pero no deja de ser Javascript, o me equivoco? Lo admito, tengo que estudiar más el tema, pero de ser así el problema con AJAX es el mismo que con javascript, si el usuario lo tiene bloqueado, se vuelve innavegable, al menos que su función no gravite en la usabilidad del sitio. Como dije, tengo que leer sobre el tema.