Como validar formulários com o jQuery Validate

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Quem é desenvolvedor sabe a importância de fazer validações antes de enviar qualquer formulário, porém fazer tudo via PHP ou outra linguagem de programação "server side" é mais complicado, pois as informações precisam ir até o servidor para serem validadas e só então retornar o resultado desta validação para o browser do usuário.

Com jQuery tudo fica diferente, uma vez que o processamento das informações pode ser feito antes de enviar os dados ao servidor, fazendo as validações diretamente no navegador do usuário. E se usar um plugin do jQuery, o Validate, fica tudo mais simples ainda, pois o trabalho dura já está todo pronto, podemos apenas definir os campos a serem validados, bem como o tipo de validação que queremos, o resto é por conta do jQuery Validate.

Acompanhe nesta aula como fazer as principais validações em um formulário de exemplo, tais como campos requeridos, email, url, tamanho mínimo e máximo entre outras. Bom estudo...

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 22 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Danilo comentou em

    Estou tentando fazer as validações, mas não gostaria de usar submit e sim um button ou um link . Faria a validação e caso esteja tudo ok ele usaria json no php para enviar os dados sem dar refresh na página.
    alguém pode me ajudar?

    Responder
  • Rafael comentou em

    Infelizmente o name tem q ser o msm ex: name=nome[], pq eu faço inserção no banco por array, estou tentanto fazer com class, teria como nesse validate? estou fazendo assim: '.class ' : required: true, qual seria a maneira correta?

    Responder
  • Rafael comentou em

    Olá, e como q ficaria essa validação se eu tivesse um append? onde ele add novos campos com o msm name="nome[]" como q eu faço pra ele validar tudo que é adicionado com msm name

    Responder
    • Cada campo deve conter algum identificador único para que você possa usar na validação, caso não tenha veririque a possibilidade de estar gerando este identificador.

      Responder
  • Soares comentou em

    Ricardo, você tem alguma vídeo aula ou sabe de algum site que ensine a enviar uma página de campos para Excel? Fiz um programa com jquery e tenho uma folha de pedidos, onde coloco os ítens que meu cliente quer comprar mas esta folha eu preciso transformar em um arquivo de excel e enviar via e-mail para a fábrica poder faturar o pedido, você pode me dar o caminho ? Desde já muito obrigado.

    Responder
  • Lucas P. Vital comentou em

    Olá, muito obrigado por postar essas vídeos aulas.
    Admiro o seu trabalho, parabéns!!
    Em breve estarei adquirindo uma Conta Premium.

    Responder
  • Olá Ricardo, como sempre suas aulas são muito boas e muito bem explicadas, antes de mais nada meu muito obrigado.

    Com relação a validação do formulário, vale lembrar a todos que o mesmo só funciona com o navegador que estiver com o javascript habilitado, e que pessoas mal intencionadas a nos prejudicar de alguma forma, pode facilmente "burlar" essa validação.

    O ideal é que nunca deixe de fazer o mesmo tipo de validação em PHP por exemplo.

    Sempre que possível deixe essa dica durante as video aulas.

    Abraços e até mais.

    Responder
  • Lucivan comentou em

    Primeiramente, obrigado pela bela aula e ótima explicação.

    Tenho um dúvida na vídeo aula você só fez a referencia ao link do jQuery Validate, se eu baixar o mesmo e atualizar as mensagens internamente direto do código do jQuery Validate, não será necessário eu ter que refazer as mensagens em todos os forms, e puxará as mensagem de lá, mas como eu coloquei elas em português fica tudo ok né?

    Obrigado!

    Responder
  • roger comentou em

    Muito bom essa vídeo aula obrigado, só me responde uma coisa, é possivel fazer também o verificador de senha forte ou fraca nesse mesmo jquery validate?

    Responder

Deixe seu comentário