Manipulando os erros do jQuery Validate de forma diferente

Por padrão, quando se usa o plugin jQuery Validate (se você ainda valida seus formulários na mão, há grandes chances de você estar perdendo MUITO tempo), ao lado de cada campo é exibida a mensagem de erro adequada (campo obrigatório, formato inválido, etc…).

Mas, e se você quiser trabalhar de forma diferente? Vamos lá…

Exibindo todas as mensagens de erro em uma lista

$("form#meuform").validate({
errorLabelContainer: "#minhalista",
errorElement: "li"
});

Agora, e se você não quiser mostrar nenhuma mensagem de erro? Pode ser útil se você for marcar apenas os campos com uma borda vermelha, por exemplo. Simples, sobreescreva o método errorPlacement:

$("form#meuform").validate({
  errorPlacement: function(error,element) {
    return true;
  }
});

Você pode, ainda, querer mostrar uma mensagem única de erro. Ao invés de colocar uma mensagem por campo, apenas dizer "Seu formulário contém erros". Para isso, sobreescrevemos o mesmo método do exemplo anterior e escrevemos no elemento #minhalista a mensagem, e o deixamos visível. Ao mesmo tempo, sobreescrevemos unhighlight, verificando se a quantidade de erros for 0. Nesse caso, escondemos o elemento #minhalista para que a mensagem suma.

$("form#meuform").validate({
  unhighlight: function(element, errorClass) {
    if (this.numberOfInvalids() == 0) {
      $("#minhalista").hide();
    }
    $(element).removeClass(errorClass);
  },
  errorPlacement: function(error,element) {
    $("#minhalista").html("
Possui erros!").show();
    return true;
   }
});

 

 

As opções de tratamento das validações são gigantescas, explorem-nas!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *