jQuery Logo

Validação de formulários com jQuery

Ohay! :-D

Hoje vou demonstrar como vocês podem criar uma validação de campos (inputs) usando jQuery (JavaScript) e um plugin dele. Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.

Veja um exemplo do que será aprendido nessa aula:
http://blog.thiagobelem.net/exemplo2/

Usarei como exemplo um formulário de contato que é o mais comum por ai… Vamos ao passo-a-passo:

Faça o download da última versão do jQuery no site: http://jquery.com/
Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Insira-os dentro do <head> do seu site, da seguinte forma:

<script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.validate.js" type="text/javascript"></script>

Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:

* { font-family: Verdana; font-size: 96%; }
label { display: block; margin-top: 10px; }
label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
p { clear: both; }
.submit { margin-top: 1em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:

$(document).ready( function() {
	$("#formularioContato").validate({
		// Define as regras
		rules:{
			campoNome:{
				// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
				required: true, minlength: 2
			},
			campoEmail:{
				// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
				required: true, email: true
			},
			campoMensagem:{
				// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
				required: true, minlength: 2
			}
		},
		// Define as mensagens de erro para cada regra
		messages:{
			campoNome:{
				required: "Digite o seu nome",
				minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
			},
			campoEmail:{
				required: "Digite o seu e-mail para contato",
				email: "Digite um e-mail válido"
			},
			campoMensagem:{
				required: "Digite a sua mensagem",
				minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
			}
		}
	});
});

Por fim, inserimos o HTML do formulário na pagina:

<form id="formularioContato" method="post">

	<label for="nome">Nome</label>
	<input id="nome" name="campoNome" type="text" />

	<label for="email">E-mail</label>
	<input id="email" name="campoEmail" type="text" />

	<label for="mensagem">Mensagem</label>
	<textarea id="mensagem" name="campoMensagem"></textarea>

	<input class="submit" type="submit" value="Enviar" />

</form>

Viram como é fácil? O arquivo final ficou desta forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.

Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.

Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.

Veja o exemplo desta aula funcionando:
http://blog.thiagobelem.net/exemplo2/

Mais exemplos de validações diferentes podem ser encontrados no site do plugin:
http://jquery.bassistance.de/validate/demo/

Abraços e até a próxima! :)

40 thoughts on “Validação de formulários com jQuery

  1. Abel Gomes

    Bom dia Thiago… estou com dificuldade de validar a data 14/12/1981… é uma data validada e jquery validate diz que é uma data errada … como corrigir isso dentro do exemplo que você deixou? obrigado

  2. José Ivan Marciano Junior

    Valeu Thiago, aprendi a fazer validação básica de formulário com jQuery de formulário nesse tutorial.

  3. Felipe

    Olá meu caro,

    Tem um erro no script jQuery…
    Incorreto: minLength
    correto : minlength

    Se não ele pega a mensagem padrão do Biblioteca que está em ingles.

  4. Carlos Henrique

    Por favor, poderia explicar como ficaria o seguinte caso:

    - Se o e-mail for válido MAS… já existir na tabela.
    Neste caso não poderia deixar passar.

    Se puder colocar o download do projeto inteiro seria legal.
    Obrigado e um abraço.

  5. Luiz

    Olá, Thiago. Parabéns.
    Tentei utilizar para validar os campos do comments.php (template padrão do WordPress), mas não tive sucesso. Não aparecem as mensagens de validação e quando aperto o enviar vai para aquela tela em branco do WordPress com a mensagem: Erro: preencha os campos obrigatórios (nome, email).
    Alguma informação adicional?
    Muito obrigado.
    Luiz.

  6. Leandro

    Velho como eu faço para criar um documento .js de validação para meu documento principal, onde estão todas as inputs, sem o famoso: $(document).ready(function() {. Pra que aja uma conexão e eu não precise mostrar meu fonte de validação para os usuarios. Valeu

    1. Robson Quaresma

      Leandro, porque você não coloca toda sua validação dentro de um arquivo ‘nomearquivo.js’ e inclui na sua página?

      Tipo ‘$(document).ready(function(){
      sua validação…
      });’

      Já testou?

  7. Adilson

    Valew pelas dicas cara, tentei validar o campo de Telefone usando este script, mas não consegui. Você teria uma dica de como fazer isso?

    Valew mesmo!

  8. Thiago Rodrigues

    Iae! Gostei muito do código. Não conhecia essa validação. Estou até implementando para outros campos. Só não estou conseguindo uma coisa. Criar um botão voltar. Eu só consigo voltar se o formulário estiver preenchido. Se tiver algum campo obrigatório vazio ele não volta e acusa o campo em branco ou com erro no preenchimento. Tem alguma forma de fazer funcionar o botão voltar com o formulário em branco?vlws!

  9. Leonaldo dantas

    Gostei muito do seu blog,
    Eu estou com um probleminha em um formulario e gostaria se possivel me ajudar. se possivel eu te explico melhor, é um formulario de matricula escoalr on-line.

    valeu!!

  10. Jessica

    Estou com um problema de validação de formulário, pois gostaria de saber se tem como validar o campo tipo “FILE”, pois tenho um formulário que também possui a possibilidade da inclusão de uma imagem.
    Gostaria de saber como faço para validar em Jquery. Por exemplo se o arquivo possui a extensão correta?

  11. Diogo

    Thiago, eu tenho um input com o value preenchido, tipo: só que o script valida apenas se o campo for vazio.

    Existe como fazer que no java script ele tenha uma validação como esse:

    nome:{
    required: true,
    minlength: 2,
    // aqui seria o comando pra validar tbm a o conteúdo do campo
    // if nome = “Digite seu Nome”
    }

    messages:{
    nome:{
    required: “Digite o seu nome”,
    minLength: “O seu nome deve conter, no mínimo, 2 caracteres”,
    //aqui a frase
    }

    ????

    Abs

  12. durval

    Olá amigo, estou com um certo problema, no formulario que eu estou criando eu ja tenho um script do mask, para mascarar datas, cpf, etc, qnd coloco esse script, a validate nao funciona , sabe o que pode ser.

  13. Rodrigo

    Thiago,

    você sabe como aplicar essa validação somente se um determinado radio button tiver sido selecionado?
    Valeu

  14. Elaine

    Olá Tiago, baixei ste seu exemplo mas na não sta funcionando na minha máquina, oq pode star acontecendo? não acontece nada, não aparece as mascaras e nem são feitas as validações?

    Vleu Obrigada!!!

  15. Rubia

    Isso…. é um imput só. Queria validar ele no formato (99) 9999-9999.
    Enconteri algumas informações porém, não consegui fazer funcionar.

    Fico no aguardo e obrigada por responder.

    Ah! E se vc conhecer algum site,blog,livro…. com conteúdo bom e desde o nivel iniciante, fico grata se me informar.

    1. Thiago Belem

      @Rubia
      O ideal seria dividir o telefone em três inputs: codigo do estado, 1ª parte e 2ª parte… Mesmo que fiquem um do lado do outro [__][____][____]… Com isso você só vai precisar validar se o usuário entrou com inteiros (digitos) nos três campos e fica + facil de identificar qual parte tá com erro. ;)

  16. Rubia

    Ola Thiago!
    Mais uma vez meus Parabéns! Muito bom o tutorial…
    Porém, não estou conseguindo validar o campo telefone com mascara…
    Você sabe o que pode estar acontecendo?
    Muito obrigada pelas dicas!

  17. Diego

    segui o tutorial mais as mensagem estão saindo em inglês. Exemplo:
    Please enter at least 2 characters.

    O que pode Ser?

    1. Paulo

      O problema é que no exemplo está escrito minLength, sendo o correto: minlength, tudo em letras minúsculas.

      Abçs

  18. Fabio Lima | 29 anos | Paulíni

    Olá Thiago tudo bem?
    Muito legal o modo como você escreveu este tutorial, pois muitos tem até medo do Jquery tamanho o poderio dele e do jeito que você o fez aqui neste post encoraja pessoas como eu a estudá-la e usá-la. Parabéns.
    Bom, como todo iniciante tenho algumas dúvidas e gostaria de saber se você pode me ajudar.
    - As mensagens de erro do meu form só aparecem abaixo do 1° input independente do campo que gerou o erro;
    - Algumas mensagens não aparecem como foram setadas e sim a original do arquivo validate.js;
    - Aproveitando a oportunidade, tem como incluirmos uma função de validação de cpf no validade.js?;

    Se quiser dar uma olhada no formulario: http://www.kudphoka.com.br/teste

    Abraços

    Fabio Lima

    1. Thiago Belem

      @Fabio Lima
      O erro aconteceu pq todos os campos estão com o mesmo ID e esse é um atributo único (não pode repetir o mesmo ID pra mais de um elemento HTML). ;)

Comments are closed.