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á.
