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"> </span></li>
<li><input type="text" name="txtNome" id="txtNome" placeholder="Seu nome aqui" /></li>
<li>e-mail: <span id="rsEmail"> </span></li>
<li><input type="text" name="txtEmail" id="txtEmail" placeholder="email@dominio.com" /></li>
<li>Senha: <span id="rsSenha"> </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.
