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:

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.

Por: Marcelo Britto | Publicado em: 31.05.2006

Este é, com certeza, um dos temas mais polêmicos e discutidos entre webdesigners e profissionais free-lancers. Perguntas como: Quanto custa um site? Quanto cobrar por um site? Qual o preço de uma homepage? Estão presentes em diariamente conversas informais, reuniões e também na curiosidade de qualquer empresário que deseja fixar presença na internet.

Normalmente os autores de artigos que tratam sobre este tema costumam sair pela tangente, utilizando expressões vagas e que não apresentam informações novas.

Durante os meses de março a maio de 2006, realizei uma enquete com diversos webdesigners de diferentes regiões do Brasil e obtive as seguintes informações:

Existem diferentes tamanhos de sites. Para facilitar nossa compreensão, dividi em três tipos: básico, intermediário e avançado. Evidente que o assunto não se esgota aqui, pois existem milhões de particularidades que devem ser levadas em conta.
Dependendo da região do Brasil, os valores cobrados por um site básico, podem superar os valores cobrados em outra região por um site que exija maior trabalho.
Mais de 30% dos profissionais que responderam a enquete, disseram não estabelecer nenhum tipo de contrato por escrito com seus clientes, valendo-se apenas do acordo verbal e da confiança.
Os valores cobrados são os seguintes:

Site básico: é composto por poucas páginas, não usa recursos em flash e nem banco de dados. Possui algumas fotos e imagens e conta um layout igualmente básico.
Região Centro-Oeste: de R$ 650,00 a R$ 1.500,00 (R$ 720,00 – média)
Região Nordeste: de R$ 720,00 a R$ 1.400,00 (R$ 800,00 – média)
Região Norte: de R$ 490,00 a R$ 980,00 (R$ 650,00 – média)
Região Sudeste: de R$ 980,00 a R$ 1.800,00 (R$ 1.300,00 – média)
Região Sul: de R$ 600,00 a R$ 1.400,00 (R$ 900,00 – média)

Site intermediário: é composto por um número maior de páginas, utiliza pequenos recursos em flash e pode ter algum recurso de banco de dados (notícias). Possui algumas fotos e imagens e conta um layout um pouco mais refinado.

Região Centro-Oeste: de R$ 850,00 a R$ 1.800,00 (R$ 1.100,00 – média)
Região Nordeste: de R$ 920,00 a R$ 1.730,00 (R$ 1.230,00 – média)
Região Norte: de R$ 790,00 a R$ 1.250,00 (R$ 980,00 – média)
Região Sudeste: de R$ 1.700,00 a R$ 3.300,00 (R$ 2.200,00 – média)
Região Sul: de R$ 980,00 a R$ 2.400,00 (R$ 1.550,00 – média)

Site avançado: é composto por várias páginas, usa recursos em flash e banco de dados. Possui fotos e imagens trabalhadas e conta um layout sofisticado.
Região Centro-Oeste: de R$ 1.300,00 a R$ 2.800,00 (R$ 1.800,00 – média)
Região Nordeste: de R$ 1.500,00 a R$ 3.730,00 (R$ 2.440,00 – média)
Região Norte: de R$ 1.190,00 a R$ 1.850,00 (R$ 1.450,00 – média)
Região Sudeste: de R$ 2.700,00 a R$ 7.300,00 (R$ 3.400,00 – média)
Região Sul: de R$ 1.670,00 a R$ 4.200,00 (R$ 2.630,00 – média)

Algumas observações que são muito importantes e precisam ser consideradas:

A grande maioria dos profissionais disse que os valores são negociáveis, ou seja, estão dispostos a conceder descontos aos clientes.
Alguns profissionais se autodeclararam “barateiros”, ou seja, cobram valores que eles próprios consideram abaixo do mercado.
Alguns profissionais disseram não trabalhar com sites “básicos”, preferindo apenas projetos maiores, que lhes proporcionam maior remuneração.
Conforme comentei no início deste artigo, a enquete não considerou projetos específicos, que envolvam desenvolvimento de sistemas complexos. Levamos em conta, apenas sites cuja estrutura é previsível.
Se você deseja ajudar a manter estas informações atualizadas, peço que entre em contato informando os valores cobrados para cada “modelo” citado. Todas as informações fornecidas são confidenciais e sigilosas.

Um abraço e até a próxima!

Marcelo Britto é designer, consultor em projetos de internet, especialista em marketing digital, instrutor de webdesign e ministra treinamentos e palestras sobre webmarketing.

Fonte: Portaldigidesign