What’s up dude? What’s going on?

A validação de formulários é um dos usos mais comuns na programação Javascript. A validação de dados por meio da programação Javascript é muito fácil e rápida por que a verificação é feita no browser, sem necessitar ir até o servidor para transmitir dados.

A validação é feita para não haver inconsistência de dados quando forem enviados para a base de dados. Uma checagem no servidor seria necessário no caso do Javascript estar desligado ou se, de alguma maneira, alguém tentar driblar a validação de forma maliciosa ou por engano. Para a maioria das pessoas a validação Javascript consegue economizar muito tempo.

Para podermos trabalhar com a validação de formulário, foi criado um formulário padrão para podermos testar. A figura abaixo será o nosso exemplo:

Com uma noção de onde pretendemos chegar vamos construir o nosso formulário baseado na imagem acima:

Exemplo:

<form name="cadastro" action="teste.php" method="post" onSubmit="return validaForm()">
          <table width="40%" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
                    <tr>
                              <td>nome:</td>
                              <td><input name="nome" type="text"></td>
                    </tr>
                    <tr>
                              <td>user:</td>
                              <td><input name="user" type="text"></td>
                    </tr>
                    <tr>
                              <td>senha:</td>
                              <td><input name="senha" type="password"></td>
                    </tr>
                    <tr>
                              <td>email:</td>
                              <td><input name="email" type="text"> (xxx@xx.xx)</td>
                    </tr>
                    <tr>
                              <td>telefone:</td>
                              <td><input name="telefone" type="text"></td>
                    </tr>
                    <tr>
                              <td>Data de nascimento:</td>
                              <td><input name="nasce" type="text"> (dd/mm/yyyy)</td>
                    </tr>
                    <tr>
                              <td>Sexo :</td>
                              <td>
                                        <input name="sexo[]" type="radio" value="masculino" id="sexo">
Masculino
                                        <input name="sexo[]" type="radio" value="feminino" id="sexo">
Feminino
                              </td>
                    </tr>
                    <tr>
                              <td colspan="2">
                                        <div align="right">
                                        <input name="enviar" type="submit" value="enviar">
                                        </div>
                              </td>
                    </tr>
          </table>
</form>

O codigo HTML é uma estrutura de tabela com um formulário, tudo bem simples. Basta apenas prestar atenção para os nomes das caixas de entradas e dos botões radio bos para não ter problemas na hora da programação.

No formulário acima, o evento onSubmit chama uma função chamada validaForm que será responsável pela validação dos dados do formulário. Se os dados estiverem corretos retornará true e o formulário será enviado. Caso contrário uma mensagem será mostrada determinando o local do erro.

Com o formulário criado agora vamos partir para o desenvolvimento do código. Neste formulário será feita a checagem de seis caixas de entrada de dados e de um radio box.
Para validação das as caixas de entradas é feita uma verifição se foi digitado algum valor.
Para o campo e-mail a verificação é mais elaborada para saber se é um endereço de email válido.

Para o campo telefone, só são aceito números.
Para o campo Data de nascimento é verificado se a data esta correta com o padrão estabelecido.
Para o campo Sexo é verificao se algum valor foi selecionado.

Exemplo (Ao final desta matéria temos o link para visualização do resultado final):

1 function validaForm(){
2           d = document.cadastro;
3           //validar nome
4           if (d.nome.value == ""){
5                     alert("O campo " + d.nome.name + " deve ser preenchido!");
6                     d.nome.focus();
7                     return false;
8           }
9           //validar user
10         if (d.user.value == ""){
11                   alert("O campo " + d.user.name + " deve ser preenchido!");
12                   d.user.focus();
13                   return false;
14         }
15         //validar senha
16         if (d.senha.value == ""){
17                   alert("O campo " + d.senha.name + " deve ser preenchido!");
18                   d.senha.focus();
19                   return false;
20         }
21         //validar email
22         if (d.email.value == ""){
23                   alert("O campo " + d.email.name + " deve ser preenchido!");
24                   d.email.focus();
25                   return false;
26         }
27         //validar email(verificao de endereco eletrônico)
28         parte1 = d.email.value.indexOf("@");
29         parte2 = d.email.value.indexOf(".");
30         parte3 = d.email.value.length;
31         if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) {
32                   alert ("O campo " + d.email.name + " deve ser conter um endereco eletronico!");
33                   d.email.focus();
34                   return false;
35         }
36         //validar telefone
37         if (d.telefone.value == ""){
38                   alert ("O campo " + d.telefone.name + " deve ser preenchido!");
39                   d.telefone.focus();
40                   return false;
41         }
42         //validar telefone(verificacao se contem apenas numeros)
43         if (isNaN(d.telefone.value)){
44                   alert ("O campo " + d.telefone.name + " deve conter apenas numeros!");
45                   d.telefone.focus();
46                   return false;
47         }
48         //validar data de nascimento
49         erro=0;
50         hoje = new Date();
51         anoAtual = hoje.getFullYear();
52         barras = d.nasce.value.split("/");
53         if (barras.length == 3){
54                   dia = barras[0];
55                   mes = barras[1];
56                   ano = barras[2];
57                   resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
58                   if (!resultado) {
59                             alert("Formato de data invalido!");
60                             d.nasce.focus();
61                             return false;
62                   }
63         } else {
64                   alert("Formato de data invalido!");
65                   d.nasce.focus();
66                   return false;
67         }
68         //validar sexo
69         if (!d.sexo[0].checked && !d.sexo[1].checked) {
70                   alert("Escolha o sexo!")
71                   return false;
72         }
73         return true;
74 }

Linha 1 – Declaração da função responsável pela validação dos dados do formulário.

Linha 2 – Declaração de uma variável para economizar tempo e prováveis erros de digitação.

Linha 4 – Verificação se foi digitado algum valor para o campo nome. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 10 – Verificação se foi digitado algum valor para o campo user. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 16 – Verificação se foi digitado algum valor para o campo senha. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 22 – Verificação se foi digitado algum valor para o campo email. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 28 – Declaração de uma variável que armazenara a posição do caractere “@” na caixa de entrada email.

Linha 29 – Declaração de uma variável que armazenara a posição do caractere “.” na caixa de entrada email.

Linha 30 – Declaração de uma variável que armazenara a quantidade de caracteres digitados na caixa de entrada email.

Linha 31 – Estrutura condicional para verificação se o caractere “@” está no mínimo depois de três letras, o caractere “.” está no mínimo depois de seis e se foi digitado no mínimo 9 letras. Se retornar falso, é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 37 - Verificação se foi digitado algum valor para o campo telefone. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 43 - Verificação se o valor digitado no campo telefone possui apenas números. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 50 – Declaração de uma variável que armazena uma nova Data.

Linha 51 - Declaração de uma variável que armazena o valor do ano no formato completo com 4 caracteres.

Linha 52 – Declaração de uma variável que separa o valor da caixa de entrada referente a data de nascimento e coloca em uma matriz, a “/” é utilizada para separar os valores entre elas, é suposto ter 3 valores referente a dia, mês e ano respectivamente.

Linha 53 - Estrutura condicional para verificação se tem 3 valores para a matriz criada. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 54 - Declaração de uma variável que recebe o primeiro valor da matriz, valor esse referente ao dia.

Linha 55 - Declaração de uma variável que recebe o segundo valor da matriz, valor esse referente ao mês.

Linha 56 - Declaração de uma variável que recebe o terceiro valor da matriz, valor esse referente ao ano completo com 4 caracteres.

Linha 57 - Declaração de uma variável que faz a verificação das variáveis criadas anteriormente referente a dia, mês e ano, é feita uma checagem se os valores são números e se estão no padrão estabelecido.

Linha 58 - Estrutura condicional para checagem se o resultado da verificação dos dados digitados. Se retornar falso é é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 69 - Verificação se foi selecionado algum valor referente ao sexo. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 73 – Se todos os valores foram digitados corretamente a função vai retornar true e o formulário será enviado.

Sempre lembrando que essa validação é boa, mas pode ser feito muito mais coisas para aprimorar, até mesmo trabalhar com programação orientada a objeto com o intuito de criar métodos que façam a análise dos dados.

Clique aqui para ver o html com o resultado final!

Valeu galera até a próxima semana!