Manipulando os erros do jQuery Validate de forma diferente

Publicado em Publicado por gserrano

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!

Como ignorar o jQuery Validate

Publicado em Publicado por gserrano

O jQuery validate é um plugin que facilita muito a validação de formulários, com poucas linhas você especifica exatamente o que deve ser validado, como e quais mensagens serão exibidas para cada validação.

Porém em alguns momentos ele pode ser um problema, estava fazendo uns testes e procurava uma solução para desabilitar o "Validate" de um form em uma situação específica.

No StackOverflow publicaram umas dúvidas bem parecidas com esta e aprendi uma coisa bacana com o jQuery, que é utilizar a ação direta no DOM, ignorando o javascript.

Supondo que eu tenha o seguinde formulário:

<form id="odesenvolvedor" action="action.php" method="post">
   <input name="blog" value="" class="required" type="text" />
   <input type="submit" value="Valide!" id="validateForm" />
   <input type="submit" value="Não valide!" id="skipValidateForm"  />
</form>

E na página deste form nós configuramos a seginte validação para este form, utilizando o jQuery Validate:

  <script type="text/javascript">
  $(document).ready(function(){
    $("#odesenvolvedor").validate();
  });
  </script>

O problema

Você quer que quando o usuário clicar no botão skipValidateForm o formulário seja enviado sem passar pela validação.

Isso pode acontecer devido a uma alteração nos campos do form, ou a seleção de um algum campo que torne a validação desnecessária, por exemplo.

 

Soluções

1. Submit direto pelo DOM (recomendado)

Esta foi a melhor solução que encontrei para o problema. No botão com id skipValidateForm você informa que o submit deve ser feito diretamente pelo DOM, ignorando qualquer evento relacionado ao submit.

Para fazer isto utilizando o jQuery:

$("#skipValidateForm").click(function(){    $("#odesenvolvedor")[0].submit(); });

Pronto, o evento "click" no botão vai disparar o submit do form pelo DOM – ignorando o Validate.

 

2. Remover os eventos do submit do form

Um método de dar submit no formulário e ignorar o Validate é removendo todos os eventos relacionados ao submit do form:

$("#odesenvolvedor").unbind("submit");

Qualquer submit após a linha acima não irá considerar o validate, pois o evento foi removido.

Esta não é a solução recomendada, pois uma vez removido o evento não vai mais funcionar (no outro botão, que deveria ter submit) – a não ser que novamente seja chamado o validate para o form – nada performático.

Adicionei esta segunda "solução" apenas para mostrar o funcionamento do unbind.

 

Críticas e dúvidas nos comentários! 🙂