Validando formulário com Javascript

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.

Gunnar Correa
Gunnar Correa

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

Deixe um comentário