';

O que é o jQuery Validate

Olá! O jQuery Validate é um plugin para jQuery que facilita a validação de formulários html com javascript.
Criado pelo pessoal do bassistance.de e previamente chamado de jQuery Validation esse plugin foi disponibilizado de forma open source está em constante atualização. A versão mais atual do jQuery Validate pode ser encontrada para download em sua página de releases ou se prefirir ela está disponível também no CDN.js

Configurando o jQuery Validate em sua página

Para utilizar o jQuery Validate, a primeira coisa que você precisa fazer é adicioná-lo a sua página html, porém por se tratar de um plugin do jQuery, você precisa também importar o jQuery. Você consegue fazer isso da seguinte forma:

Validando Formulários com jQuery Validate

Configurando o jQuery Validate em sua página

Como vocês podem perceber a importação jQuery e do jQuery Validate foram feitas antes do fechamento da tag <body>.

O Formulário

Agora que já temos as dependências importadas em nossa página, vamos criar um simples formulário html com os campos mais comuns de um formulário de cadastro, para que possamos fazer a validação na mesma página, sem recarregar.
Nesse formulário teremos nome, email, senha, confirmação de senha e por fim o aceite de termos e condições de uso. Com esses 5 campos, vamos conseguir aplicar algumas regras de validação, como campos obrigatórios, campo com email válido, campo com confirmação e por aí vai. Então vamos lá, faça o formulário da assim:

O Formulário

O Formulário

Validando o Formulário

Com tudo devidamente adiconado ao html, chegou a hora de validar o formulário na mesma página usando javasvcript, com a ajuda do jQuery e do jQuery Validate.
Para isso vamos abrir uma tag <script type="text/javascript"></script> e adiconar as nossas regras:

Validando o Formulário

Validando o Formulário

Pronto! Agora é só rodar o código no browser e ver tudo funcionando. Com isso a gente conseguiu validar um formulário html, que pode ser feito em PHP, NodeJs ou qualquer outra linguagem de backend. Como tudo acontece no front-end a experiência do usuário fica muito mais agradável.

Código completo

O código completo apenas é exibido no desktop, pois a leitura fica mais fácil, mas você pode acessar tambem pelo link direto do Gist.


No código completo, eu adicionei tambem alguns estilos css, apenas para que a pagina fique mais apresentável.

Para saber mais…

Agora que você já sabe como utilizar o jquery validate, você pode recorrer a documentação para verificar os diversos métodos de validação que o plugin tem por padrão.

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos serguir nas redes sociais, por que você não pode ficar de fora!

  1. Curta nossa página no facebook
  2. Não perca as atualizações no twitter
  3. Veja as dicas no instagram
  4. Siga nossos repositórios no github
  5. Faça parte da nossa lista de desenvolvedores

Esse post foi publicado em 22 de maio de 2010, e teve uma atualização recente. Este é um post de cunho didático para quem está começando com o uso do jquery e o jquery validate, o código pode sim ser refatorado para melhor leitura, assim como também podemos usar as tags html5 para verificação de campos obrigatórios, email, ect. Enfim, tudo pode ser melhorado, mas devemos ir passo a passo.


@emersonbroga

Formado em Desenvolvimento de Sistemas pela Faculdade Pitágoras e pós-graduado em Gestão Estratégica de Marketing pela PUC Minas trabalhei em diversas agências e atualmente trabalho em projetos internacionais como FOX.com, FXNetworks.com, NatGeo.com entre outros.