Como ignorar o jQuery Validate

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! 🙂

Validação de formulários com prototype

Um dos grandes pontos positivos que eu vejo na jQuery é a quantidade absurda de plugin desenvolvidos em cima dele: menus, efeitos, requisições ajax, validações…
Sou há tempos um tipo de fanboy adepto da Prototype, mesmo sabendo que devo ser minoria. Então, fui procurar algumas coisas na web a esse respeito. Achei para validação de formulários uma biblioteca bem bacana e simples.

http://tetlaw.id.au/view/javascript/really-easy-field-validation

Para utilizar, você precisa:

incluir as bibliotecas (prototype e a de validação):
<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>

escrever elementos dessa forma (required indica que é um campo a ser validado e validate-number que deve ser validado como um número)
<input class="required validate-number" id="field1" name="field1" />

ativar a validação passando o id do form
<script type="text/javascript">
     new Validation(´form-id´);
</script>

Os campos podem ser validados de diversas formas (apenas letras, apenas dígitos, como uma url, formato de endereço de e-mail, data, etc…)

Existem diversas outras opções, como usar o atributo title do input para setar a mensagem a ser exibida caso a validação do campo retorna false, dizer para a rotina parar a validação no primeiro erro ou validar todos os campos, etc…

Aqui tem um exemplo completo do autor 🙂