Posts Tagged validação

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

Postado por Danilo in jQuery em 31 de maio de 2009

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 .

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!"
			}
		}
	});
});