Como validar um formulário HTML usando o plugin Validation para jQuery.



Hoje vou apresentar o Validation, um plugin jQuery utilizado para validação de formulários HTML.
Existem pela web muitos validadores de formulário utilizando javascript, escolhi o Validation por ser uma solução desenvolvida em jQuery, por ser seu mais antigo plugin para validação de formulários HTML, e porque indico e utilizo em minhas aplicações.
Com ele podemos facilmente, mostrar mensagens de erro e esconder-las quando necessário.
Atualmente o plugin está na versão 1.5.2 e sua documentação pode ser encontrada aqui .

Formulário à ser validado



HTML do formulário exibido acima:

<form id="form_validacao" method="post">
	<fieldset>
		<legend>Validação com jQuery Validation</legend>
 
			<label for="nome">Nome: </label>
			<input id="nome" name="nome" type="text" />  
 
 (requerido, e ter no mínimo 2 caracteres) 
 
			<label for="email">E-Mail: </label>
			<input id="email" name="email" type="text" /> 
 
 (requerido, valida e-mail)
 
			<label for="senha">Senha: </label>
			<input id="senha" name="senha" type="password" /> 
 
 (requerido, e ter no mínimo de 6 caracteres)
 
			<label for="confirmasenha">Confirma Senha: </label>
			<input id="confirmasenha" name="confirmasenha" type="password" /> 
 
 (deve ser igual a senha, e ter no mínimo de 6 caracteres)
 
			<label for="forcarcomentario">Forçar comentário?: </label>
			<input id="forcarcomentario" name="forcarcomentario" type="checkbox" />
 
			<label for="comentario">Comentário: </label>
			<textarea id="comentario" name="comentario"></textarea> 
 
 (requerido se requerer comentário estiver marcado)
 
			<input class="submit" type="submit" value="Submit" />
 
	</fieldset>
</form>

Precisamos validar os campos com as seguintes opções:

Nome: campo requerido, e ter no mínimo de 2 caracteres;
E-mail: campo requerido, e verificar se o e-mail está correto;
Senha: campo requerido, e ter no mínimo 6 caracteres;
Confirma Senha: campo requerida, ter no mínimo 6 caracteres, e conferir com a senha;
Comentário: campo requerido somente se campo “Forçar Comentário” estiver marcado;

Validando o formulário incluíndo as regras do Validation jQuery:

$(document).ready(function(){
	jQuery('#form_validacao').validate( {
		rules: {
			nome: {
				required: true,
				minlength: 2
			},
			email: {
				required: true,
				email: true
			},
			senha: {
				required: true,
				minlength: 6
			},
			confirmasenha: {
				required: true,
				minlength: 5,
				equalTo: "#senha"
			},
			comentario: {
				required: "#forcarcomentario:checked",
				minlength: 3
			}
		},
		messages: {
			nome: {
				required: "Por favor, preencha seu nome!",
				minlength: "Seu nome tem que ter mais de 2 letras!"
			},
			email: {
				required: "Por favor, digite seu e-mail!",
				email: "E-mail inválido!"
			},
			senha: {
				required: "Preencher sua senha!",
				minlength: "Senha deve ter no mínimo 6 caracteres!"
			},
			confirmasenha: {
				required: "Preencher a confirmação de senha!",
				minlength: "Confirmação de senha deve ter no mínimo 6 caracteres!",
				equalTo: "Confirmaçao de senha não confere com a senha!"
			},
			comentario: {
				required: "Preencher o coméntário!"
			}
		}
	});
});

Baixar o Validation
Documentação do Validation
Site do Autor

Compare preços de livros jQuery.

, , ,

  1. #1 por Chris Benseler - 28 de setembro de 2009 em 19:06

    Esse daí já é usado costumeiramente nos projetos aqui…

  2. #2 por Danilo - 28 de setembro de 2009 em 20:40

    Legal Chris,

    Já faz um tempinho q to usando em praticamente todos os últimos projetos…
    É uma “mão na roda”.

    Abraço!!

  3. #3 por Fabricio Fernandes - 16 de maio de 2010 em 03:37

    Danilo vc poderia me enviar esse arquivo por email .. ja tentei varias vezes colocar pra funcionar .. nao surte nenhum efeito .. devo estar exportando algo de errado .. agradeço desde já!

(não será publicado)
  1. Sem citações ainda.