Boteco Digital

Validando formulários com JQuery-Plugin-Validation

30/04/2011
Rodrigo Aramburu

Apesar de ser fundamental validar as informações enviadas por um formulário no lado do servidor, também é importante validar as informações no lado do cliente evitando assim que o usuário tenha que enviar o formulário, que leva algum tempo, para saber que esqueceu de preencher um campo obrigatório.

Existe um plugin para JQuery que nos facilita muito a vida, o jquery-plugin-validation que nos permite uma boa customização nas validações. Vamos aos exemplos.

O modo mais fácil de validar é adicionar um classe ao input que deve ser validado.

Primeiramente baixe o plugin jquery-plugin-validation e adicione na página o arquivo da biblioteca JQuery e o arquivo plugin “jquery.validate.js”. Após isso podemos começar com nosso formulário.

<form method="post" action="mostrar.php" id="form1">
	<div>
		<label for="nome">Nome:</label>
		<input type="text" name="nome" id="nome" class="required" />
	</div>
	<div>
		<label for="sobrenome">Sobrenome:</label>
		<input type="text" name="sobrenome" id="sobrenome" class="required" />
	</div>			
	<div class="submit">
		<input type="submit" />
	</div>
</form>

Repare que foi adicionada a classe required nos inputs que devem ser preenchido, o plugin nos formece alguma as seguinte validações:

Classes

required: Não pode ser deixado em branco.

email: Valida E-mail.

url: Valida um endereço de um site.

date: Valida uma data.

number: Valida que o valor informado seja numérico.

Também podemos utilizar os atributos:

minlength: Número minimo de caracteres.

maxlength: Número máximo de caracteres.

O Javascript para valida o formulário é o seguinte:

$(document).ready(function(){
	$("#form1").validate();
});

Veja o exemplo

Como você irá notar caso um campo não seja válido o plugin irá criar um novo elemento label após o campo do formulário, com a classe error que pode ser estilizado como queira, ma existe um pequeno problema, a mensagem gerada é em inglês e em algumas situações queremos customizar essa mensagem. Veja o exemplo:

 $("#form1").validate({
		rules:{
			nome:{
				required:true,
				minlength:5			
			},
			sobrenome:{
				required:true,
				minlength:5			
			}		
		}, 
		messages:{
			nome:{
				required:"Você deve preencher o nome",
				minlength:"O nome deve ter mais que 5 caracteres"
			},
			sobrenome:{
				required:"Você deve preencher o sobrenome",
				minlength:"O sobfenome deve ter mais que 5 caracteres"	
			}	
		}
 });
 

Veja o exemplo

Bom esse é o básico, até mais e obrigado pelos peixes!


, , , , ,
comments powered by Disqus