Desenvolvimento - Javascript

jQuery: Criando uma validação de Formulários HTML

Veja neste pequeno tutorial como validar, de forma simples, um formulário HTML com a biblioteca jQuery.

por Anderson Weschnhoski


Validar as informações de um formulário sempre é muito importante, porém, quando há muitos campos que precisam ser verificados uma simples tarefa acaba ficando muito trabalhosa. Aqui neste tutorial vou abordar uma forma simples de verificar se todos os campos de um pequeno formulário foram preenchidas e marcar os campos em branco.

jQuery

Primeiro, vamos precisar chamar o arquivo da biblioteca jQuery externa, para isso, basta inserir o código abaixo dentro da tag head do seu documento HTML.

Listagem 1: Chamando biblioteca jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

HTML

Começamos com o código do formulário HTML que tomaremos como exemplo para executar a validação:

Listagem 2: Estrutura básica do formulário

<html>
<head>
<title>Como Validar um Formulário dinamicamente com jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
</head>
<body>

<form id="form" name="form" method="post">
   	<span style="display:inline-table; width:70px;">Nome:</span>
  	 <input type="text" id="nome" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Email:</span>
	<input type="text" id="email" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Telefone:</span>
	<input type="text" id="telefone" value="" />
	<br /><br />
   	<input type="button" id="botao" value="enviar" />
   </form>

</body>
</html>

Serão apenas três campos apenas para fins de exemplo, são eles: nome, email e telefone, além de um botão com o id botao, para o usuário poder enviar as informações. Detalhe, o botão ter que ser do tipo button, e não do tipo submit.

Código javascript

Perfeito, com o formulário montado agora podemos escrever o javascript. A primeira parte vai apenas verificar se o campo em que o usuário passou foi preenchido ou não, e vai marcar este campo com uma borda vermelha. Nosso script vai ser acionado quando o campo sair de foco, ou seja, nossa verificação só vai acontecer se o campo em questão entrar em foco e depois sair sem ser preenchido.

Listagem 2: Primeira parte do javascript

<html>
<head>
<title>Como Validar um Formulário dinamicamente com jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	$("input").blur(function(){
   	 if($(this).val() == "")
   		 {
   			 $(this).css({"border-color" : "#F00", "padding": "2px"});
   		 }
    });
})
</script>
</head>
<body>

<form id="form" name="form" method="post">
   	<span style="display:inline-table; width:70px;">Nome:</span>
  	 <input type="text" id="nome" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Email:</span>
	<input type="text" id="email" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Telefone:</span>
	<input type="text" id="telefone" value="" />
	<br /><br />
   	<input type="button" id="botao" value="enviar" />
   </form>

</body>
</html>

Como eu disse a cima, esse script vai ser disparado quando um campo qualquer do formulário (input) sair de foco (.blur()). Se esse campo estiver vazio, ele vai ser marcado com uma borda vermelha.

Nota: Por algum motivo ao alterar a borda o navegador sumia com o padding padrão, por isso eu atribuí 2px.

Até aí temos um efeito visual, a medida em que o usuário passa pelos campos e não os preenche eles são sinalizados. Porém, apesar do botão não ser do tipo submit, o formulário pode ser enviado, pois ainda não realmente validamos os campos. Nas próximas linhas de código vou mostrar como enviar as informações somente se todos os campos estiverem preenchidos.

Listagem 3: Segunda parte do javascript

<html>
<head>
<title>Como Validar um Formulário dinamicamente com jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	$("input").blur(function(){
   	 if($(this).val() == "")
   		 {
   			 $(this).css({"border" : "1px solid #F00", "padding": "2px"});
   		 }
    });
    $("#botao").click(function(){
   	 var cont = 0;
   	 $("#form input").each(function(){
   		 if($(this).val() == "")
   			 {
   				 $(this).css({"border" : "1px solid #F00", "padding": "2px"});
   				 cont++;
   			 }
    	});
   	 if(cont == 0)
   		 {
   			 $("#form").submit();
   		 }
    });
});
</script>
</head>
<body>

<form id="form" name="form" method="post">
   	<span style="display:inline-table; width:70px;">Nome:</span>
  	 <input type="text" id="nome" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Email:</span>
	<input type="text" id="email" value="" />
	<br /><br />
	<span style="display:inline-table; width:70px;">Telefone:</span>
	<input type="text" id="telefone" value="" />
	<br /><br />
   	<input type="button" id="botao" value="enviar" />
   </form>

</body>
</html>

Agora sim! Quando for clicado no #botao, a variável cont é zerada, ela que controla quantos campos não foram preenchidos, depois o script percorre todos os inputs dentro do #form, com a função .each() do jQuery, e verifico com um if se eles estão vazios ou não. Se sim, o script troca a cor da borda e soma mais um na variável cont.

O próximo if verifica se cont é igual à zero, isso quer dizer que nenhum campo está vazio. Caso essa condição seja verdadeira eu envio os dados do formulário com a função .submit().

Note que o código apresentado nesse tutorial verifica todos os campos do formulário, inclusive o botão, então você deve colocar alguma coisa dentro da propriedade value, se fizer isso não precisa se preocupar.

Bom, finalizamos por hoje, acho que esse script vai ser muito útil pra formulários mais simples, pois evita checar campo por campo.

Abraços, e até a próxima.

Mais sobre jQuery:

Anderson Weschnhoski

Anderson Weschnhoski - Trabalho com PHP e MySQL, CSS, javascript, jQuery, manjo um pouco de Ajax, tenho um bom domínio sobre Wordpress e algumas técnicas de SEO. Como disse, também tenho uma pequena experiência de 2 anos com blogs.