Seteo de FB.Canvas.setAutoGrow

Al desarrollar apps de Facebook, es de esperar que las distintas páginas que la componen tengan diferentes altos, como sucede con cualquier sitio web.

Como las apps se cargan dentro de un iframe (el cual siempre tiene un alto), necesitamos hacerle saber a Facebook que a medida que navegamos entre pantallas, necesita actualizar el alto del iframe.

Es así como Facebook nos da el maravilloso FB.Canvas.setAutoGrow,  que promete ser la solución a las molestas barras de scroll vertical del iframe.

Pero no lograrán deshacerse de esas molestas barras al menos que pongan estas líneas de CSS:


html, body{
    overflow:hidden;
}

No estaría mal que incluyan este código en el developers.facebook.

Ajuste para jQuery.validationEngine

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

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

Si se desea evitar esa validación, uno debe hacer lo siguiente:


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

De esta manera, la validación la realizará sólo cuando se haga submit del formulario.

Pero hoy me pidieron que la validación de los campos 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, y pasa al siguiente, el sistema 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. Al mismo tiempo, no debo perder la validación de campo vacío 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.

Diseñador Multimedial