Validar jQuery não está funcionando conforme o esperado
Estou usando o jQuery validate () e quando simplesmente:
$("#myForm").validate({
onfocusout: function (valueToBeTested) {
if($(valueToBeTested).hasClass('required')){
if(this.element(valueToBeTested)){
$(valueToBeTested).addClass('valid');
} else{
$(valueToBeTested).addClass('invalid');
};
};
}
rules:
{
...(rules here)
}
});
Funciona bem. Mas quando tento adicionar algo comoonkeyup
ousubmitHandler
:
$("#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:
{
...
}
});
começa a não funcionar: 1) nesse cenário, parece nunca entrar nosubmitHandler
quadra. Mesmo quando tento duplicar oonfocusout
funcionalidade dentro de umonkeyup
quadra. 2) quando o segundo bloco está presente, ele mexe com oonfocusout
bloquear no sentido de que oonfocusout
O bloco funcionará na primeira vez em qualquer campo, e não novamente.
Sinto que estou perdendo algo óbvio, pois acho que estou fazendo o que a documentação diz. Quero que a validação ocorra nos três. oonfocusout
eonkeyup
são praticamente iguais, mas osubmitHandler
deve fazer o mesmo, preencher e mostrar a div de erro.
O que estou perdendo aqui?
Obrigado.