Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Validação de formulário com Javascript

| 0 comentários

Nesta matéria você vai aprender como submeter um formulário apenas depois que todos os campos estiverem corretamente preenchidos.

Esta é uma cópia oficial da matéria publicada em: http://satellasoft.com/?materia=validacao-de-formulario-com-javascript

Quem nunca acessou uma página que só permitia enviar um formulário depois de todos os campos preenchidos que atire a primeira pedra. Pois é, validação de formulários é uma medida de segurança muito importante que previne que falsos dados sejam preenchidos, se o usuário esquece algo ele é informado e também para informar em tempo real se algo esta errado, existe algumas páginas que só informar  se algo esta certo ou não depois de submeter o formulário e isso é muito irritante.

Par ver um exemplo On-Line clique aqui.

Depois desta "Longa" introdução do por que validar, vamos direto para a programação,  Abaixo esta nosso formulário que vamos validar, este é apenas  um exemplo com poucos campos, no seu formulário você vai adaptar para a sua necessidade.

Descrição: C:\Users\Gunner\Desktop\Validação de formulário\validacaojs01.jpg

01.<!doctype html>
02.<html lang="pt-br">
03.<head>
04.<title>Validação de formulário</title>
05.<meta charset="utf-8">
06.<style type="text/css">
07.
08..resultado{color:red; font-family:Verdana; font-size:26px;}
09.</style>
10.</head>
11.<body>
12.<form method="post" action="" name="frmCadastro">
13.<table>
14.<caption>Preencha todos os campos</caption>
15.<colgroup>
16.<col style="background-color:#CCC;">
17.<col span="2">
18.</colgroup>
19.<tr>
20.<td>Nome:</td>
21.<td><input type="text" name="txtNome"id="txtNome" /></td>
22.<td><span class="resultado" id="rsNome">*</span></td>
23.</tr>
24.<tr>
25.<td>E-mail:</td>
26.<td><input type="text" name="txtEmail"id="txtEmail" /></td>
27.<td><span class="resultado" id="rsEmail">*</span></td>
28.</tr>
29.<tr>
30.<td>Telefone:</td>
31.<td><input type="text" name="txtTelefone"id="txtTelefone" /></td>
32.<td><span class="resultado"id="rsTelefone">*</span></td>
33.</tr>
34.<tr>
35.<td colspan="3"><input type="submit"name="btnSubmit" value="Cadastrar" /></td>
36.</tr>
37.</table>
38.</form>
39.</body>
40.</html>

Vamos entender as obrigações do formulário:

- Ter um nome para o form(name="frmCadastro").
- Ter um nome para os input(txtNome).
- Um objeto que vai receber os resultados(<span id="rsNome">*</span>).

Através do nome do formulário que vamos encontrar nossos input e depois de encontrado vamos pegar seu valor e fazer a validação e exibir em um span o resultado.

 

01.<script type="text/javascript">
02.
03.function validarNome(){
04.var nome = frmCadastro.txtNome.value;
05.}
06.
07.function validarEmail(){
08.var email = frmCadastro.txtEmail.value;
09.}
10.
11.function validarTelefone(){
12.var telefone = frmCadastro.txtTelefone.value;
13.}
14.
15.</script>

No código acima criamos as funções referentes aos nossos campos e dentro de nossas funções criamos uma variável que acessa o valor do input informado.

 

Vamos criar a validação para o nome,  é impossível atualmente saber se o nome esta certo ou não pelo grande numero de nomes existentes, então o que devemos fazer é definir o tamanho máximo de um nome,  como por exemplo 10 caracteres, um nome e sobrenome tem mais de 10 caracteres e se não tiver não é um nome válido. Se o campo nome estiver mais de 10 caracteres então no span que exibe o resultado deve informar que esta certa ou não.

01.function validarNome(){
02.var nome = frmCadastro.txtNome.value;
03.if(nome.length > 10){
04.document.getElementById('rsNome').style.color="green";
05.document.getElementById('rsNome').innerHTML = "Valido";
06.}else{
07.document.getElementById('rsNome').style.color="Invalido";
08.document.getElementById('rsNome').innerHTML = "*";
09.}
10.}

 

No código acima usei o nome da variável que já tem o valor do campo e usei a função length que pega a quantidade de caracteres que tem aquela variável. Verifiquei se a quantidade de caracteres é maior que 10 e se for  informamos valido para o span rsNome e invalido se o nome for menor que 10.

Agora vamos validar nosso campo de E-mail, todo E-mail obrigatoriamente tem @ e . então o que devemos verificar é exatamente isto.

01.function validarEmail(){
02.var email = frmCadastro.txtEmail.value;
03.
04.if(email.indexOf("@") > 1 && email.indexOf(".") > 1){
05.document.getElementById('rsEmail').style.color="green";
06.document.getElementById('rsEmail').innerHTML = "!";
07.}else{
08.document.getElementById('rsEmail').style.color="red";
09.document.getElementById('rsEmail').innerHTML = "*";
10.}
11.}

 

No código acima usei a função indexOf("@") na variável email. O indexOf() procura um valor em uma string e neste caso usei ele duas vezes para verificar se tem o @(Arroba) e se tem o .(Ponto).

 

Por ultimo nosso campo de telefone, todo telefone tem apenas números e X quantidade de caracteres no estado de São Paulo, por exemplo, os telefones residenciais tem 8 dígitos + o DDD então no caso são 11 caracteres numéricos. Vamos apenas verificar a quantidade de caracteres igual fizemos para o nome.

01.function validarTelefone(){
02.var telefone = frmCadastro.txtTelefone.value;
03.if(telefone.length > 10){
04.document.getElementById('rsTelefone').style.color="green";
05.document.getElementById('rsTelefone').innerHTML = "Valido";
06.}else{
07.document.getElementById('rsTelefone').style.color="Invalido";
08.document.getElementById('rsTelefone').innerHTML = "Invalido";
09.}
10.}

A lógica do código acima é o mesmo do campo nome porém não tem o que explicar.

Agora precisamos acessar estas funções cada vez que o usuário digitar algo em um dos campos, para isso vamos usar o evento onkeyup="" o onkeyup é ativado quando o usuário pressiona uma tecla e solta, ou seja depois que esta tecla for apertada,  dentro dos input coloque onkeyup="validarNome();" dentro do onkeyup coloque o nome da respectiva função para o campo. Teste o formulário e veja que já esta informando se os dados estão certos ou não.

Descrição: C:\Users\Gunner\Desktop\Validação de formulário\validacaojs02.jpg

Note que se aparecer uma sugestão e você der um duplo clique em um dado para evitar escrever o campo ficará inválido mesmo contendo a quantidade de caracteres e os caracteres necessários para a validação. Isso por que você chama a função quando o campo é pressionado e neste caso ele não foi. Para evitar isso vamos usar também o evento onblur=""que é quando um objeto perde o foco, ou seja você saiu do campo em que estava digitando. O procedimento é o mesmo do onkeyup="" basta adicionar depois do evento onkeyup, onblur="validarNome();", faça isso para todos os campos.

 

Vamos criar nossa ultima função para verificar todos estes campos, esta função vai retornar verdadeiro se tudo estiver certo ou falso se estiver errado.  Em nosso formulário crie um span com o id chamado rsGeral. <span id="rsGeral">&nbsp;</span>.

01.function validarFormulario(){
02.var nome = frmCadastro.txtNome.value;
03.var email = frmCadastro.txtEmail.value;
04.var telefone = frmCadastro.txtTelefone.value;
05.
06.if(nome.length > 10 && email.indexOf("@") > 1 && email.indexOf(".") > 1 && telefone.length > 10){
07.document.getElementById('rsNome').style.color="green";
08.document.getElementById('rsNome').innerHTML = "Valido";
09.return true;
10.}else{
11.document.getElementById('rsNome').style.color="red";
12.document.getElementById('rsNome').innerHTML = "Preencha todos os campos corretamente.";
13.return false;
14.}
15.}

No código acima perceba que usamos todas as nossas verificações em um único lugar, pois ai tem que saber se tudo esta certo de uma única vez. Existem outros jeitos de fazer isso, porém optei pelo modo mais fácil.

Agora dentro da TAG form adicione onsubmit="return validarFormulario();", o onsubmit é chamado quando submetemos o formulário, neste caso ao enviar o formulário ele espera o retorno de uma função e se esta função retornar false o formulário não é enviado.

Por: Gunnar Correa  | http://www.satellasoft.com

Deixe uma resposta

Campos requeridos estão marcados *.