Validando Formulários com jQuery Validate

O jQuery possui um ótimo plugin para validação de formulários, que é o Validation, criado pelo pessoal
do http://bassistance.de/ você fazer o download no site deles, ou simplesmente
importar o plugin diretamente do site da Microsoft Ajax CDN (Content Delivery Network).

Vamos lá

Para usar o pluguin você deve importar também o jQuery (lógico né?!).

Importando os arquivos de javascript.

<!-- Inclusão do Jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<!-- Inclusão do Jquery Validate -->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" ></script>

Criando o formulário

<form id="meu_form" action="" method="post" >
	Nome:<br />
	<input type="text" name="nome" id="nome" /><br />
	Email:<br />
	<input type="text" name="email" id="email" /><br />
	Senha:<br />
	<input type="password" name="senha" id="senha" /><br />
	Confirmação de Senha:<br />
	<input type="password" name="conf_senha" id="conf_senha" /><br />
	Aceito os termos e condições:<br />
	<input type="checkbox" name="termos" id="termos"/><br />
	<input type="submit" value="Cadastrar" />
</form>

E a validação:

<script type="text/javascript">
	$(document).ready(function(){
		$('#meu_form').validate({
			rules:{ 
				nome:{ 
					required: true,
					minlength: 3
				},
				email: {
					required: true,
					email: true
				},
				senha: {
					required: true
				},
				conf_senha:{
					required: true,
					equalTo: "#senha"
				},
				termos: "required"
			},
			messages:{
				nome:{ 
					required: "O campo nome é obrigatorio.",
					minlength: "O campo nome deve conter no mínimo 3 caracteres."
				},
				email: {
					required: "O campo email é obrigatorio.",
					email: "O campo email deve conter um email válido."
				},
				senha: {
					required: "O campo senha é obrigatorio."
				},
				conf_senha:{
					required: "O campo confirmação de senha é obrigatorio.",
					equalTo: "O campo confirmação de senha deve ser identico ao campo senha."
				},
				termos: "Para se cadastrar você deve aceitar os termos de uso."
			}
			
		});
	});
</script>

No formulário acima temos os campos e validações:
Nome: Obrigatório e no mínimo 3 caracteres.
Email: Obrigatório e Email Válido.
Senha: Obrigatória.
Confirmação de Senha: Obrigatória e idêntica a “senha”.
Termos e Condições: Obrigatório.

Faça o download dos arquivos.

No site do Jquery, você encontra uma lista de validações padrão, embutidas no plugin Validate.

Espero que tenham gostado.
[ratings]

Para compartilhar use este link:

http://migre.me/Hkk4
  • http://www.desviralata.com Daniel

    mui bueno!

  • http://www.brunopullis.com.br Pulis

    Bom demais não conhecia o parametro equalsTo para confirmar senha….

  • http://www.construsitebrasil.com Muito bom

    Muito bom companheiro!

  • Leonardo Cruz Costa

    Legal. Obrigado por compartilhar.

  • Andre Push Thyago

    cara, estou enviando o meu form para outra página com este plugin do Jquery (‘validator’). Utilizando esta função$.validator.setDefaults({
    $var
    submitHandler: function() {
    alert(“submitted!”);
    }
    });

    $.metadata.setType(“attr”, “validate”);

    $(document).ready(function() {
    $(“#form1”).validate();
    $(“#formulario”).validate();
    });

    como que eu mando para outra página? pois ele permanece na mesma página.

  • http://twitter.com/_Marttos Gustavo Marttos

    @Andre Push Thyago, em action=”” na primeira linha do HTML, coloque dentro das aspas a URL para a página desejada.

    Espero ter ajudado. Abraços.

  • Gustavo Braz89

    Pessoal, preciso de uma ajuda. Usando o “validate” se o campo estiver errado é disparado uma mensagem, que é definida em “messages”, então dinamicamente quando se corrige o erro a mensagem é retirada. Eu gostaria que ao invés de simplesmente retirar a mensagem disparasse um novo evento. Por exemplo, validando um formulário quando você tenta subter e tem algum campo errado esse campo fica vermelho, então quando corrigir o erro o campo fica da cor verde. Isso é possível de fazer? Se alguém puder ajudar, obrigado.

  • Ingridleitecosta

    coloquei o valida no meu código mas ele nao roda no ie7

  • Akysab

    Amigo e para textarea como se faz?

  • @emersonbroga

    Da mesma forma que um campo de texto comum (input text).

    Obrigado.

  • @emersonbroga

    Nos outros browsers e versões funcionou?
    Verifique se o html está com todas as tags fechando direitinho e verifique se o javascript está com todas as variaveis inicializadas. O código tem que estar bem estruturado para o ie7, pois ele é mais chato.

    Obrigado.

  • Convidado

    Massa!!
    Valeu!!

  • Aline Araújo

    Muito show,
    mas não está rodando no IE9. Alguém tem alguma dica?

    Obrigada,
    Aline

  • Jonathan

    Muito bom. Parabéns!

  • sebastian

    aew será que algue pode me ajudar eu to usando esse código foi um dos melhores ate agora mais ele é bom porque ele funciona e é simples. mais o que eu queria saber se alguem pode me ajudar como que faz com que dé pra usar esse script mais quando as mens aparecer do formulário não crescer e sim as mens apenas aparecer embaixo do txtarea……vlw e curti o site

  • Silvinhaweb

    existe a opção de quando tiver 2 inputs, ele validar como obrigatório ou um ou outro?Exemplo: o usuáriuo vai poder escolher o nome através de um select, ou de um dos checks boxes que vai ter logo abaixo. Se ele escolher o select, o check box tem q deixar de ser obrigatório e vice e versa

  • http://twitter.com/LUCIANO_LAZZERI luciano

    legal mais não roda no IE

  • Asas

    sasas

  • Aha

    BOA !

  • http://twitter.com/rafaelhbarreto Rafael Barreto

    Excelente!

  • Douglas Gelsleichter

    uso css para modificar a posição dos textos das msgs de erro.

    label.erro{position :absolute;}

    recomendo envolver os inputs ou textareas em divs para que vc possa controlar melhor a posição das msgs.

  • Jordan

    Cara, valeu!

  • JOAO

    SHOW DE BOLA.. VC MERECIA GANHAR O QUE EU GANHEI FAZENDO UM SITE PRA UM ACAMPAMENTO

  • Armando Da Costa

    cool =)

  • RAFAEL

    Boaaaa ainda em que tem pessoas dispostas a nos ajudar .

  • asdasd

    asadasasd

  • Manuel Alves

    Obrigadão

  • Adamo Alighieri

    valeu Brogão!

  • http://tecnomorfose.blogspot.com Wellington Torrejais

    Parabéns pelo post. Obrigado…

  • http://lincolnnogueira.com.br Lincoln Nogueira

    Link está fora do ar =(

  • emersonbroga

    Boa tarde Lincoln, infelizmente o post é de 2010 … e pelo visto devido as mudanças de servidor, acabei perdendo os arquivos. Vou tentar arrumar um tempinho e fazer de novo.. Obrigado pelo aviso.