jQuery validate no funciona como se esperaba
Estoy usando jQuery validate () y cuando simplemente tengo:
$("#myForm").validate({
onfocusout: function (valueToBeTested) {
if($(valueToBeTested).hasClass('required')){
if(this.element(valueToBeTested)){
$(valueToBeTested).addClass('valid');
} else{
$(valueToBeTested).addClass('invalid');
};
};
}
rules:
{
...(rules here)
}
});
funciona bien. Pero cuando trato de agregar algo comoonkeyup
osubmitHandler
:
$("#myForm").validate({
onfocusout: function (valueToBeTested) {
if($(valueToBeTested).hasClass('required')){
if(this.element(valueToBeTested)){
$(valueToBeTested).addClass('valid');
} else{
$(valueToBeTested).addClass('invalid');
};
};
},
submitHandler: function(i){
var badForm = false;
var errmsg = "<img src=\"invalid.png\"/><br/>";
var $required_fields = $(".required");
$required_fields.each( function(i) {
if(!($(i).valid())){
errmsg += $(i).name + " is required<br/>";
badForm = true;
}
if(badForm){
alert("bad");
$('#errdiv').html(errmsg).show();
window.scrollTo(0,0);
}
});
},
rules:
{
...
}
});
comienza a no funcionar: 1) en este escenario, parece que nunca entra en elsubmitHandler
bloquear. Lo mismo cuando trato de duplicar elonfocusout
funcionalidad dentro de unonkeyup
bloquear. 2) cuando el segundo bloque está presente, se mete con elonfocusout
bloquear en el sentido de que elonfocusout
El bloque funcionará la primera vez en cualquier campo, luego no de nuevo.
Siento que me falta algo obvio ya que creo que estoy haciendo lo que dice la documentación. Quiero que la validación suceda en los tres. losonfocusout
yonkeyup
son más o menos lo mismo, pero elsubmitHandler
debería hacer lo mismo, además de llenar y mostrar el error div.
¿Que me estoy perdiendo aqui?
Gracias.