Validando formulários com JQuery

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>
 
&nbsp;
<h1>Validando Formulário com JQuery</h1>
&nbsp;
 
<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>&nbsp;
<p align="center"><a title="Visite meu blog periodicamente" href="http://www.rafaelwendel.com">www.rafaelwendel.com</a></p>
&nbsp;

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:

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

É 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.

Posts relacionados

Comentários

  1. 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.

  2. 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.

  3. 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

  4. É 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.

  5. 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.

  6. Olá, muito interessante!
    Me ajudou muito!
    Mas gostaria de saber se é possível validar o CPF dessa forma?
    Sou novata em javascript.
    Agradeço!

Deixe um comentário

O seu endereço de e-mail não será publicado.