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:

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 < style="color: rgb(0, 153, 102);">isNaN(mes) && (mes > 0) && (mes < style="color: rgb(0, 153, 102);">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.