Validando formulário com Javascript

Gunnar CorreaGunnar Correa08/04/2015 às 12:05:42 - 8.014 acessos

Saiba como validar formulários utilizando Javascript, para aumentar a segurança.


Validação no Client Side já esta mais do que comprovado que melhora a interação do usuário com o site, mas é claro, que as validações no servidor também devem ser feitas.

Validação no cliente é necessário por vários motivos, como por exemplo, se o usuário não preencheu corretamente seu e-mail, ao invés de @ ele inseriu 2, e esta validação for no cliente, ele já recebe a mensagem de e-mail inválido antes de submeter o formulário, se fosse no servidor ele poderia perder todas as demais informações já cadastradas.

Primeiro precisamos que nosso HTML esteja corretamente desenvolvido, neste caso inserimos um ID no formulário, em cada input e também a frente de cada definição do campo, há um Span com seu respectivo ID, é neste Span que será impresso se o formulário esta validado ou não.

Veja o modelo do HTML abaixo.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Validações</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="validacaoJs.js"></script>
		<style>
			ul{list-style:none;}
			
			.break{margin:10px;}
		</style>
	</head>
	<form method="post" id="frmCadastro" name="frmCadastro">
		<ul>
			<li>Nome: <span id="rsNome">&nbsp;</span></li>
			<li><input type="text" name="txtNome" id="txtNome" placeholder="Seu nome aqui" /></li>
			
			<li>e-mail: <span id="rsEmail">&nbsp;</span></li>
			<li><input type="text" name="txtEmail" id="txtEmail" placeholder="email@dominio.com" /></li>
			
			<li>Senha: <span id="rsSenha">&nbsp;</span></li>
			<li><input type="password" name="txtSenha" id="txtSenha" placeholder="********" /></li>
				<div class="break"></div>
			<li><input type="submit" name="btnSubmit" id="btnSubmit" value="Enviar"/></li>
		</ul>
	</form>
</html>

O código Javascript esta totalmente comentada, para entender basta ler atentamente cada bloco.

Note que aqui estamos utilizando addEventListener, é totalmente errôneo o uso do evento  onsubmit=”” acoplado a Tag do Form, além de não ser seguro.

Primeiro necessitamos que a página seja carregada, para isto usamos o evento DOMContentLoaded, que é executado após a página ser carregada por completo.

Código 02:

document.addEventListener("DOMContentLoaded", function(){ //Cria um evento para quando a página for carregada

	document.getElementById("frmCadastro").addEventListener("submit", function(e){
		var nome  = document.getElementById("txtNome").value;//Carregamos o valor do campo nome
		var email = document.getElementById("txtEmail").value;//Carregamos o valor do campo e-mail
		var senha = document.getElementById("txtSenha").value;//Carregamos o valor do campo senha
		var validacoes = 0; //Variável de controle, se inicia com zero

		
		if(nome.length > 10){ //Se o nome conter mais de 10 caracteres.
			document.getElementById("rsNome").style.color = "green";//Alteramos a cor do Span para Verde
			document.getElementById("rsNome").innerHTML = "OK";//Alteramos o valor do Span para OK
			validacoes++;//Incrementamos 1 a variável de controle
		}else{
			document.getElementById("rsNome").style.color = "red";//Alteramos a cor do Span para Vermelho
			document.getElementById("rsNome").innerHTML = "*";//Alteramos o valor do Span para *
		}
		
		if(email.indexOf('@') > 0 && email.indexOf('.') > 0){ //Se houver @ e . então é um e-mail válido
			document.getElementById("rsEmail").style.color = "green";//Alteramos a cor do Span para Verde
			document.getElementById("rsEmail").innerHTML = "OK";//Alteramos o valor do Span para OK
			validacoes++;//Incrementamos 1 a variável de controle
		}else{
			document.getElementById("rsEmail").style.color = "red";//Alteramos a cor do Span para Vermelho
			document.getElementById("rsEmail").innerHTML = "*";//Alteramos o valor do Span para *
		}
		
		if(senha.length > 7){ //Se a senha conter mais de 7 caracteres, é uma senha válida
			document.getElementById("rsSenha").style.color = "green";//Alteramos a cor do Span para Verde
			document.getElementById("rsSenha").innerHTML = "OK";//Alteramos o valor do Span para OK
			validacoes++;//Incrementamos 1 a variável de controle
		}else{
			document.getElementById("rsSenha").style.color = "red";//Alteramos a cor do Span para Vermelho
			document.getElementById("rsSenha").innerHTML = "*";//Alteramos o valor do Span para *
		}
		
		if(validacoes != 3){ //Se todos os campos estiverem válidos, a variável de controle terá o valor três, senão...
			e.preventDefault();//Não envia o formulário e retorna o estado padrão.
			//o e representa o evento, que vem como parâmetro no evento Submit
		}	
	});
});

Em caso de dúvidas, deixe nos comentários.


validação formulário javascript client side seguraça web documento html css eventlistener innerhtml length

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários