Validação de formulários utilizando Javascript

Transcrição

1 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:

2 <form name="cadastro" action="teste.php" method="post" onsubmit="return validaform()"> <table width="40%" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000"> <td>nome:</td> <td><input name="nome" type="text"></td> <td>user:</td> <td><input name="user" type="text"></td> <td>senha:</td> <td><input name="senha" type="password"></td> <td> </td> <td><input name=" " type="text"> <td>telefone:</td> <td><input name="telefone" type="text"></td> <td>data de nascimento:</td> <td><input name="nasce" type="text"> (dd/mm/yyyy)</td> <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> <td colspan="2"> <div align="right"> <input name="enviar" type="submit" value="enviar"> </div> </td> </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á

3 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 a verificação é mais elaborada para saber se é um endereço de 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(); //validar user 10 if (d.user.value == ""){ 11 alert("o campo " + d.user.name + " deve ser preenchido!"); 12 d.user.focus(); //validar senha 16 if (d.senha.value == ""){ 17 alert("o campo " + d.senha.name + " deve ser preenchido!"); 18 d.senha.focus(); //validar 22 if (d. .value == ""){ 23 alert("o campo " + d. .name + " deve ser preenchido!"); 24 d. .focus(); //validar (verificao de endereco eletrônico) 28 parte1 = d. .value.indexof("@"); 29 parte2 = d. .value.indexof("."); 30 parte3 = d. .value.length; 31 if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) { 32 alert ("O campo " + d. .name + " deve ser conter um endereco eletronico!"); 33 d. .focus(); 34 35

4 36 //validar telefone 37 if (d.telefone.value == ""){ 38 alert ("O campo " + d.telefone.name + " deve ser preenchido!"); 39 d.telefone.focus(); //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(); //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(); else { 64 alert("formato de data invalido!"); 65 d.nasce.focus(); //validar sexo 69 if (!d.sexo[0].checked &&!d.sexo[1].checked) { 70 alert("escolha o sexo!") 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 é Linha 10 Verificação se foi digitado algum valor para o campo user. Se retornar falso é

5 Linha 16 Verificação se foi digitado algum valor para o campo senha. Se retornar falso é Linha 22 Verificação se foi digitado algum valor para o campo . Se retornar falso é Linha 28 Declaração de uma variável que armazenara a posição do na caixa de entrada . Linha 29 Declaração de uma variável que armazenara a posição do caractere. na caixa de entrada . Linha 30 Declaração de uma variável que armazenara a quantidade de caracteres digitados na caixa de entrada . Linha 31 Estrutura condicional para verificação se o 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 é 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.

6 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 é 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

7 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 (is.ie) { color: #efefef; background-color:#efefef; border: 1px solid # ; /*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(); //validar user if (d.user.value == ""){ alert("o campo " + d.user.name + " deve ser preenchido!"); d.user.focus(); //validar senha if (d.senha.value == ""){ alert("o campo " + d.senha.name + " deve ser preenchido!"); d.senha.focus(); //validar if (d. .value == ""){ alert("o campo " + d. .name + " deve ser preenchido!"); d. .focus(); //validar (verificao de endereco eletronico) parte1 = d. .value.indexof("@"); parte2 = d. .value.indexof("."); parte3 = d. .value.length; if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) { alert("o campo " + d. .name + " deve ser conter um endereco eletronico!"); d. .focus(); //validar telefone if (d.telefone.value == ""){ alert("o campo " + d.telefone.name + " deve ser preenchido!"); d.telefone.focus(); //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(); //validar data de nascimento erro=0; hoje = new Date(); anoatual = hoje.getfullyear();

8 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(); else { alert("formato de data invalido!"); d.nasce.focus(); //validar sexo if (!d.sexo[0].checked &&!d.sexo[1].checked) { alert("escolha o sexo!") 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"> <td>nome:</td> <td><input name="nome" type="text"></td> <td>user:</td> <td><input name="user" type="text"></td> <td>senha:</td> <td><input name="senha" type="password"></td> <td> </td> <td><input name=" " type="text"> (xxx@xx.xx)</td> <td>telefone:</td> <td><input name="telefone" type="text"></td> <td>data de nascimento:</td> <td><input name="nasce" type="text"> (dd/mm/yyyy)</td> <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> <td colspan="2"> <div align="right"> <input name="enviar" type="submit" value="enviar"> </div> </td> </table> </form> </body> </html>