Fala pessoal! Infelizmente o tempo para adicionar conteúdo novo aqui no blog está muito escasso, mas hoje consegui uma “folga” para escrever um post bem interessante que aborda a validação de formulários utilizando jquery.
Com o plugin validate vocês verão como é fácil verificar se os campos obrigatórios foram preenchidos, se o campo de email possui um email válido, motorcycle fairings,se um arquivo possui a extensão permitida, etc.
Para acompanhar o post, recomendo que façam o download do jquery e do plugin validate.
Feito isso, vamos organizar os arquivos do nosso projeto da seguinte maneira
- index.html
- jquery-1.6.2.js
- jquery.validate.js
- validar.js
No arquivo index.html colocaremos o formulário e no validar.js criaremos as regras de validação do mesmo.
Implementação do arquivo index.html
<script src="jquery-1.6.2.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript"></script><script src="validar.js" type="text/javascript"></script> <style type="text/css"> /* Estilizar os alertas */ label.error{ padding-left: 5px; color: red; font-weight: bold; } </style> <h1>Validando Formulário com JQuery</h1> <form id="form1" enctype="multipart/form-data" method="post" name="form1"><label for="nome">Nome:</label> <input id="nome" name="nome" size="45" type="text" /> <label for="email">Email:</label> <input id="email" name="email" size="45" type="text" /> <label for="idade">Idade:</label> <input id="idade" name="idade" size="2" type="text" /> <label for="foto">Foto:</label> <input id="foto" name="foto" size="45" type="file" /> <input type="submit" value="Enviar Dados" /> </form> <p align="center"><a title="Visite meu blog periodicamente" href="http://www.rafaelwendel.com">www.rafaelwendel.com</a></p> |
No cabeçalho faço a inclusão dos 3 arquivos javascripts e também coloco uma regra de estilo css para deixar os alertas melhores apresentados. Crio o formulário (form1) e defino 3 campos de textos dentro dele (nome, email e idade) e 1 campo de arquivo (file).
Agora vamos definir algumas regras de validação para cada um desses campos. Por exemplo: o campo nome será obrigatório e deverá ter ao menos 5 caracteres. O campo email também será obrigatório e deverá ser um email válido. O campo idade só aceitará valores acima de 18. E o campo foto só aceita arquivos com extensão de imagem (jpg e png).
Veja o arquivo validar.js
$(document).ready( function() { $("#form1").validate({ /* REGRAS DE VALIDAÇÃO DO FORMULÁRIO */ rules:{ nome:{ required: true, /* Campo obrigatório */ minlength: 5 /* No mínimo 5 caracteres */ }, email:{ required: true, /* Campo obrigatório */ email: true /* Deverá ser um email válido */ }, idade:{ required: true, /* Campo obrigatório */ min: 18 /* Valor mínimo permitido: 18 */ }, foto:{ accept: "jpg|png" /* Só aceita arquivos com extensão .jpg e .png */ } }, /* DEFINIÇÃO DAS MENSAGENS DE ERRO */ messages:{ nome:{ required: "Preencha o campo <u>Nome</u>", minlength: "O campo <u>Nome</u> deve conter no mínimo 5 caracteres" }, email:{ required: "Preencha o campo <u>Email</u>", email: "O campo <u>Email</u> só aceita emails válidos" }, idade:{ required: "Preencha o campo <u>Idade</u>", min: "Você deve ser maior de idade" }, foto:{ accept: "Extensão de arquivo inválida" } } }); }); |
Implementação bem simples. Na primeira parte definimos todas as regras para os campos dos formulários. E na segunda personalizamos as mensagens/alertas de erro para cada uma das regras.
Além dos métodos que utilizamos em nosso exemplo (required, email, minlength, min e accept) o plugin ainda oferece diversos outros. Veja:
- maxlength( length ): Máximo de caracteres
- rangelength( range ): Faz com que o elemento requer um intervalo de valores dado
- max( value ): Valor máximo permitido
- url( ): URL válida
- date( ): Data válida
- dateISO( ): Data ISO válida
- number( ): Campo numérico
- digits( ): Só aceita dígitos
- creditcard( ): Um número de cartão de crédito
- equalTo( other ): igual à um determinado valor
Para ver como ficou o nosso exemplo, clique aqui. Para mais informações sobre o plugin, visitem http://docs.jquery.com/Plugins/Validation
Espero que tenham gostado.
Abs!
Siga-me no twitter: @rafaelwendel
Rafael Wendel Pinheiro
É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.
nossa, tutorial muitooooooooooo bom, parabens de novo!!!
Valeu Roberto, continue visitando o blog.
Abs
Mais uma dando um show.
Valeu!
Já su fã de carteirinha…Mas não posso deixar de vir aqui parabenizar pelo ótimo trabalho… Como sou novato na área de php estou aprendendo muito aqui…Parabéns…
Muito bom seu site!! hoje você compartilhando o conhecimento, amanha eu tambem!
Abraço por postar os artigos.
Não consigo baixar os arquivos jquery… aonde encontro ?
Olá Valter,
Segue link para download do plugin validation
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Abs
Cara, simplesmente fantástico.
Resumindo tudo foi um show de bola. me ajudou e muito num trabalho da faculdade.
Parabéns, continue assim dividindo conhecimentos para um mundo melhor…
Muito obrigado.
Cara.
Quando o usuário clica em Enviar sem ter preenchido os campos apareçe a Mensagem em vermelho logo a frente do campo.
Como eu faria para esta mensagem apareçer abaixo do campo de preenchimento e não ao lado ?
Parabens pelo seu trabalho cara, muito bom mesmo.
Olá Arthur,
Use/abuse de css no elemento label.error
Acho que um display: block; já joga ele para baixo.
Abs!
Fala, Rafael, beleza?
Cara, tentei colocar o validador de campos junto com uma máscara para data e não consegui. Se você puder me ajudar, entra em contato comigo que eu te mando mais detalhes!
[ ]s
D+ cara! O Mundo é um lugar melhor por causa de pessoas como você. Meus Parabéns!!!
É interessante gostei, mas acho que não serve para mim pois as regras estão prontas e eu preciso criar uma, tipo uma placa de carro que tem q digitar 3 letras e 4 numeros.
Valeu.
Olá Augusto,
Se você tiver conhecimentos em javascript e jquery, você pode entrar no jquery.validate.js e adicionar suas próprias funções de validação customizadas.
Abs!
Olá Rafael, tudo bem?
É com estas atitude que a Internet se trona numa das melhores plataformas de estudo…
Gostaria de saber se é possível nas “REGRAS DE VALIDAÇÃO DO FORMULÁRIO” definir as dimensões permitidas (ex: height: 200px e width :200px) no momento do upload da foto usando JQuery?
Agradeço, desde já, a tua disponibilidade.
Olá, muito interessante!
Me ajudou muito!
Mas gostaria de saber se é possível validar o CPF dessa forma?
Sou novata em javascript.
Agradeço!
Como faço para validar o tamanho da imagem que deverá subir.
Exemplo imagem com 160 x 160px ?