Validação de formulários utilizando

Javascript
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.

* Artigo de Thiago Prado publicado no site iMasters

Código Fonte
<html>
<head>
<title>valida form</title>
<style>
body, p, div, td, input, select, textarea {
font-family: verdana,arial,helvetica;
font-size:10px;
color:#27364D;
text-decoration: none;
}
input,textarea {
@if (is.ie) {
color: #efefef; background-color:#efefef; border: 1px
solid #060606 ;
/*border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px; */
}
}
textarea { overflow:auto }
</style>
<script language="JavaScript">
function validaForm(){
//validar nome
d = document.cadastro;
if (d.nome.value == ""){
alert("O campo " + d.nome.name + " deve ser preenchido!");
d.nome.focus();
return false;
}
//validar user
if (d.user.value == ""){
alert("O campo " + d.user.name + " deve ser preenchido!");
d.user.focus();
return false;
}
//validar senha
if (d.senha.value == ""){
alert("O campo " + d.senha.name + " deve ser preenchido!");
d.senha.focus();
return false;
}
//validar email
if (d.email.value == ""){
alert("O campo " + d.email.name + " deve ser preenchido!");
d.email.focus();
return false;
}
//validar email(verificao de endereco eletronico)
parte1 = d.email.value.indexOf("@");
parte2 = d.email.value.indexOf(".");
parte3 = d.email.value.length;
if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) {
alert("O campo " + d.email.name + " deve ser conter um endereco
eletronico!");
d.email.focus();
return false;
}
//validar telefone
if (d.telefone.value == ""){
alert("O campo " + d.telefone.name + " deve ser preenchido!");
d.telefone.focus();
return false;
}
//validar telefone(verificacao se contem apenas numeros)
if (isNaN(d.telefone.value)){
alert("O campo " + d.telefone.name + " deve conter apenas
numeros!");
d.telefone.focus();
return false;
}
//validar data de nascimento
erro=0;
hoje = new Date();
anoAtual = hoje.getFullYear();
 barras = d.nasce.value.split("/");
if (barras.length == 3){
dia = barras[0];
mes = barras[1];
ano = barras[2];
resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) &&
(!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <=
anoAtual && ano >= 1900));
if (!resultado) {
alert("Formato de data invalido!");
d.nasce.focus();
return false;
}
} else {
alert("Formato de data invalido!");
d.nasce.focus();
return false;
}
//validar sexo
if (!d.sexo[0].checked && !d.sexo[1].checked) {
alert("Escolha o sexo!")
return false;
}
return true;
}
</script>
</head>
<body leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
<h1>VALIDA FORM</h1>
<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>
</body>
</html>