Validar formulários é uma das tarefas mais corriqueiras de um profissional web.
Com jQuery, torna-se bem mais simples esta tarefa.

Dê uma olhada… Tenho certeza que você vai gostar!

Baixando o plugin

Você pode fazer o download do plugin, clicando aqui!

Como adicionar o plugin

Como trata-se de um plugin para o framework jQuery, antes de adicionar o plugin a sua página, você deve adicionar o arquivo do jquery. Veja como ficou o início do código.

  1. <!– Início de seu código –>
  2. <head>
  3. <script type=“text/javascript” src=“jquery.js”></script>
  4. <script type=“text/javascript” src=“jquery.validate.pack.js”></script>
  5. </head>
  6. <!– Continuação de seu código –>

A inclusão do plugin é feita na linha 4. Você deve ter percebido no arquivo que baixou, que existiam três arquivos com nomes diferentes. O arquivo que utilizamos (jquery.validate.pack.js) é a forma mais compactada do plugin. Por isto, a utilizamos.

Validando o formulário

Agora vamos validar o formulário. Mas antes, veja a estrutura de nosso formulário, logo abaixo:

  1. <div id=”Erros”></div>
  2. <form name=“MeuForm” id=“MeuForm” method=“POST” action=“pagina.php”>
  3. Nome
  4. <br />
  5. <input type=“text” name=“nome” id=“nome” />
  6. <br>
  7. Email
  8. <br />
  9. <input type=“text” name=“email” id=“email” />
  10. <br>
  11. Senha
  12. <br />
  13. <input type=“password” name=“senha” id=“senha” />
  14. <br>
  15. Confirme sua senha
  16. <br />
  17. <input type=“password” name=“c_senha” id=“c_senha” />
  18. <br>
  19. <br>
  20. <input type=“submit” value=“Cadastrar”/>
  21. </form>

Acima do código que compõe o formulário, você de incluir o código jQuery que irá validar seus campos.  Segue abaixo o código.

  1. <script type=“text/javascript”>
  2. $(document).ready(function(){
  3. $(“#MeuForm”).validate({
  4. errorLabelContainer: $(“#erros”),
  5. rules:
  6. {
  7. nome:
  8. {
  9. required:true,
  10. minlength:3
  11. },
  12. email:
  13. {
  14. required:true,
  15. email:true
  16. },
  17. senha:
  18. {
  19. required:true,
  20. minlength:8
  21. },
  22. c_senha:
  23. {
  24. required:true,
  25. minlength:8,
  26. equalTo:“#senha”
  27. }
  28. },
  30. messages:
  31. {
  32. nome:
  33. {
  34. required:“Preencha o campo nome!”,
  35. minlength:“Preencha com um nome válido”
  36. },
  37. email:
  38. {
  39. required:“É obrigatório informar o seu email”,
  40. email:“Email inválido”
  41. },
  42. senha:
  43. {
  44. required:“Preencha com uma senha”,
  45. minlength:“Sua senha deve ter no mínimo 8 caracteres”
  46. },
  47. c_senha:
  48. {
  49. required:“Preencha a confirmação de sua senha”,
  50. minlength:“Sua senha deve ter no mínimo 8 caracteres”,
  51. equalTo:“As senhas não coincidem!”
  52. }
  53. }
  54. })
  55. })
  56. </script>

Rapare que a sintaxe é bem simples, mas rica em detalhes.

Na linha 3, instanciamos o plugin que fará a validação. Por padrão, as menssagem de erro serão adicionadas ao lado de cada campo. Mas você também pode definir um div para acomodar todas as mensagens. Para isto, incluimos o

errorLabelContainer: $(#erros”")

Onde $(”#erros”) é o id de um div criado exclusivamente para exibir os erros. Você pode definir qualquer outra id para o seu div.

Repare que dentro do nosso “validate” temos dois itens:  “Rules (Regras)” e “Messages”. Sendo o primeiro, o local onde definirimos quais as regras para aquele campo e o segundo, as mensagens que serão exibidas.