Validar Formulário usando JavaScript
Olá pessoal, hoje vou demonstrar como podemos validar campos de um formulário usando JavaScript puro, sem usar a biblioteca jQuery.
Já faz um tempo que venho “ensaiando” para escrever algo sobre JavaScript, trabalho diariamente com jQuery mas em certas situações uso também JavaScript, principalmente em scripts onde não existe necessidade de carregar a biblioteca jQuery para funcionalidades simples.
Umas dessas funcionalidades é a validação de formulários HTML no fron-end, onde podemos escrever desde regras básicas até mais complexas de validação usando JavaScript puro.
Vantagens da Validação com JavaScript
1 – É muito comum encontrar programadores afirmando que preferem escrever a validação de dados apenas uma vez nos scripts back-end. Mas essa prática pode tornar a experiência do usuário “dolorosa” dependendo da banda de internet, pois dessa maneira o usuário tem que enviar o formulário para o servidor e aguardar alguns segundos (dependendo da banda de internet) para saber se existem dados inválidos ou não. Nesse caso é sempre aconselhável escrever primeiro uma validação no front-end com JavaScript ou qualquer biblioteca, podendo retornar um feedback quase que instantaneamente para o usuário sobre possíveis dados inválidos, pois essas instruções serão executadas no próprio browser. Mesmo assim devemos escrever também as validações no back-end, essa é uma prática de segurança importante.
2 – Talvez esse tema seja um dos mais discutidos em eventos front-end atualmente, existe uma mistura de “amor” e “ódio” com a famosa biblioteca jQuery, que realmente traz muitas facilidades para a escrita de códigos complexos com menos linhas, porém existem vários benchmarks na WEB afirmando o quanto seu desempenho pode ser ruim em determinadas situações e durante o carregamento da página. Nesse caso escrevendo as instruções com JavaScript puro estamos dispensando o uso da biblioteca jQuery, pois o JavaScript roda em 99,9% dos navegadores atualmente.
Validar Formulário usando JavaScript
Para esse post montei um formulário com alguns campos e utilizei o framework Bootstrap para estilizar meu formulário. O objetivo é validar todos os campos e caso seja detectado que existem dados inválidos será exibida uma mensagem informativa logo abaixo do respectivo input, serão escritas 9 tipos de validações:
- Verificar se o campo NOME está vazio
- Verificar se o campo E-MAIL está vazio
- Validar o formato do E-MAIL
- Verificar se foi selecionado um valor para o campo SEXO
- Verificar se o campo SENHA está vazio
- Verificar se o campo SENHA possui no mínimo 6 caracteres
- Verificar se o campo REPITA SENHA está vazio
- Verificar se o campo REPITA SENHA possui no mínimo 6 caracteres
- Verificar se o campo SENHA é igual ao campo REPITA SENHA
Abaixo segue a página index.php, usei a extensão “.php” mas poderia ser “.html” pois essa página não possui comandos em PHP.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title>Validação de Formulário</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> .msg-erro{ color: red; } </style> </head> <body> <div class='container'> <h1>Formulário de Cadastro</h1> <form action="" method="post" id='form-contato'> <div class="form-group"> <label for="nome">Nome</label> <input type="text" class="form-control" id="nome" name="nome" placeholder="Infome o Nome"> <span class='msg-erro msg-nome'></span> </div> <div class="form-group"> <label for="email">E-mail</label> <input type="email" class="form-control" id="email" name="email" placeholder="Informe o E-mail"> <span class='msg-erro msg-email'></span> </div> <div class="form-group"> <label for="privilegio">Sexo</label> <select class="form-control" name="sexo" id="sexo"> <option value="">Selecione o Sexo</option> <option value="Feminino">Feminino</option> <option value="Masculino">Masculino</option> </select> <span class='msg-erro msg-sexo'></span> </div> <div class="form-group"> <label for="email">Senha (mínimo 6 caracteres)</label> <input type="password" class="form-control" id="senha" name="senha" placeholder="Informe a Senha"> <span class='msg-erro msg-senha'></span> </div> <div class="form-group"> <label for="email">Repita a Senha (mínimo 6 caracteres)</label> <input type="password" class="form-control" id="senha2" name="senha2" placeholder="Informe a Senha"> <span class='msg-erro msg-senha2'></span> </div> <button type="submit" class="btn btn-primary" id='botao'> Gravar </button> </form> </div> <script type="text/javascript" src="custom.js"></script> </body> </html> |
O código acima é bem simples, praticamente todas as regras de formatação vem do bootstrap, 3 itens merecem atenção:
1 – Dentro da tag <head> adicionei apenas uma regra CSS, usando a classe “.msg-erro” para indicar que todas as mensagens serão exibidas na cor vermelha.
|
1 2 3 |
<style type="text/css"> .msg-erro{ color: red; } </style> |
2 – Abaixo dos inputs e do select coloquei um <span> para exibir as mensagens quando forem necessárias.
|
1 |
<span class='msg-erro msg-nome'></span> |
3 – Seguindo as boas práticas coloquei todo o código JavaScript em um arquivo separado custom.js e apenas chamei no final da página.
|
1 |
<script type="text/javascript" src="custom.js"></script> |
Agora vamos para o arquivo JavaScript contendo todas as instruções necessárias para validação do formulário.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
var form = document.getElementById("form-contato"); if (form.addEventListener) { form.addEventListener("submit", validaCadastro); } else if (form.attachEvent) { form.attachEvent("onsubmit", validaCadastro); } function validaCadastro(evt){ var nome = document.getElementById('nome'); var email = document.getElementById('email'); var sexo = document.getElementById('sexo'); var senha = document.getElementById('senha'); var senha2 = document.getElementById('senha2'); var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; var contErro = ; /* Validação do campo nome */ caixa_nome = document.querySelector('.msg-nome'); if(nome.value == ""){ caixa_nome.innerHTML = "Favor preencher o Nome"; caixa_nome.style.display = 'block'; contErro += 1; }else{ caixa_nome.style.display = 'none'; } /* Validação do campo email */ caixa_email = document.querySelector('.msg-email'); if(email.value == ""){ caixa_email.innerHTML = "Favor preencher o E-mail"; caixa_email.style.display = 'block'; contErro += 1; }else if(filtro.test(email.value)){ caixa_email.style.display = 'none'; }else{ caixa_email.innerHTML = "Formato do E-mail inválido"; caixa_email.style.display = 'block'; contErro += 1; } /* Validação do campo sexo */ caixa_sexo = document.querySelector('.msg-sexo'); if(sexo.value == ""){ caixa_sexo.innerHTML = "Favor preencher o Sexo"; caixa_sexo.style.display = 'block'; contErro += 1; }else{ caixa_sexo.style.display = 'none'; } /* Validação do campo senha */ caixa_senha = document.querySelector('.msg-senha'); if(senha.value == ""){ caixa_senha.innerHTML = "Favor preencher a Senha"; caixa_senha.style.display = 'block'; contErro += 1; }else if(senha.value.length < 6){ caixa_senha.innerHTML = "Favor preencher a Senha com o mínimo de 6 caracteres"; caixa_senha.style.display = 'block'; contErro += 1; }else{ caixa_senha.style.display = 'none'; } /* Validação do campo repita a senha */ caixa_senha2 = document.querySelector('.msg-senha2'); if(senha2.value == ""){ caixa_senha2.innerHTML = "Favor preencher o campo Repita a Senha"; caixa_senha2.style.display = 'block'; contErro += 1; }else if(senha2.value.length < 6){ caixa_senha2.innerHTML = "Favor preencher o campo Repita a Senha com o mínimo de 6 caracteres"; caixa_senha2.style.display = 'block'; contErro += 1; }else{ caixa_senha2.style.display = 'none'; } /* Valida se a senha é igual ao campo repita a senha */ if(senha.value != "" && senha2.value != "" && senha.value != senha2.value){ caixa_senha2.innerHTML = "O campo Repita a Senha é diferente do campo Senha"; caixa_senha2.style.display = 'block'; contErro += 1; } if(contErro > ){ evt.preventDefault(); } } |
Nesse script escrevi a função “validaCadastro()” e dentro dela executo todas as verificações, essa função é atribuída para o evento “submit” do formulário. Quando for pressionado o botão submit da página a função será executada e conforme o resultado da validação ela pode cancelar a submissão ou enviar o formulário para gravação.
Alguns pontos de destaque:
1 – O método getElementById() retorna uma referência ao elemento cujo ID foi informado via parâmetro, nesse caso estou capturando o form mas essa função foi utilizada para referenciar todos os inputs, por questões de performance é sempre bom cachear a referência de um elemento usando variáveis.
|
1 |
var form = document.getElementById("form-contato"); |
2 – Nesse ponto estou atribuindo a função “validaCadastro()” para o evento “submit” do form, no “mundo perfeito” poderíamos usar apenas o método addEventListener() para essa finalidade, mas para o I.E. 8 e seus anteriores é necessário chamar um método proprietário attachEvent() que realiza a mesma função mas temos que passar como parâmetro o nome do evento seguindo a sintaxe HTML “onsubmit”.
|
1 2 3 4 5 |
if (form.addEventListener) { form.addEventListener("submit", validaCadastro); } else if (form.attachEvent) { form.attachEvent("onsubmit", validaCadastro); } |
3 – Aqui estou atribuindo uma string contendo uma expressão regular para validar o formato do e-mail, essa expressão será testada com a função filtro.test(email), se passar então é válido o formato.
|
1 |
var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; |
4 – O método document.querySelector() retorna o primeiro elemento encontrado com o mesmo nome da classe CSS que foi passada via parâmetro, eu poderia ter utilizado IDs e capturado o elemento com a função getElementById() mas achei melhor diversificar um pouco. Esse método foi utilizado para capturar os elementos onde serão exibidas as mensagens de erro, observem que os valores dos parâmetros são iguais aos nomes de classes utilizadas nas tags <span> abaixo dos inputs.
|
1 |
caixa_nome = document.querySelector('.msg-nome'); |
5 – Se for detectado que o valor de um campo é inválido então incremento o valor da variável contErro, ao final da função verifico se essa variável é maior que zero. Se o valor for maior significa que foi encontrado um erro então temos que cancelar o comportamento padrão do form que seria submeter a página para gravação, para isso chamamos o método evt.preventDefault(), caso o valor da função seja zero então a submissão ocorre naturalmente.
|
1 2 3 |
if(contErro > ){ evt.preventDefault(); } |
Agora vamos para o resultado final do formulário, primeiro sem pressionar o botão “Gravar”:
Agora pressionando o botão “Gravar” com todos campos vazios:
Observem como fica mais intuitivo para o usuário identificar onde existem erros, é sempre bom reforçar que as validações tem que serem feitas no front-end e no back-end. Sabemos que o javascript pode ser desabilitado nos navegadores ocasionando uma brecha de segurança nas submissões de nossos formulários caso não existam validações no back-end.
Assista o Vídeo complementar ao post
Bom pessoal nesse post demonstrei como podemos escrever validações para os nossos formulários HTML usando somente JavaScript e sem o uso da biblioteca jQuery, é claro que essa validação pode ser melhorada de diversas maneiras e conforme a necessidade da aplicação, mas deixo isso para o leitor.
Se você gostou desse post compartilhe nas redes sociais, até a próxima …
