Por uma internet mais criativa e dinâmica

0800 703 3000 BATE-PAPO E-MAIL SAC BUSCAR SHOPPING ÍNDICE PRINCIPAL Canais Fóruns Multimídia Blogs Loja Virtual Eventos Bancode Currículos Por uma internet mais criativa e dinâmica Faça Login ou Cadastre-se E-mail: Senha: Entrar Manter conectado Esqueci a senha Pesquisar Arquitetura e Design 3ds max Acessibilidade Arquitetura da Informação Fireworks Flash Lightwave 3D Photoshop Suite Corel Teoria/Design Usabilidade Bancode Dados Access DB2 Interbase MySQL Oracle PostgreSQL SQL Server Carreira Certificações Mercado Tendências CMS e Framework CakePHP Django Drupal Joomla Ruby on Rails uol.com.br/ /validacao_de_formulario/ 1/18

Sistemas de E-commerce Wordpress Zend Framework Desenvolvimento Ajax Aplicativos móveis Dreamweaver Flash Flex Gerência de Projetos SEO Software Livre Visual FoxPro Visual Studio Web Standards WebServices Gerência de TI B. Intelligence Computação Forense Direito e Web E-Gov Governança de TI Mercado Linguagens.NET ADO.NET ASP.NET C#.NET VB.NET ActionScript ASP ColdFusion CSS Delphi Java Java para Mobile Java para web Javascript Ajax JQuery Prototype Perl PHP Ruby UML Visual Basic XHTML XML Mídia e Marketing Digital E-commerce E-Learning E-mail Marketing Mídia Social Mobile Marketing Publicidade Online SEO Web Analytics Web Marketing Web Writing Redes e Servidores uol.com.br/ /validacao_de_formulario/ 2/18

Apache Cisco Linux Segurança Windows Server Tecnologia Gadgets TV Digital VoIP Javascript Feeds Newsletter Segunda-feira, 31 de maio de 2004 às 01h59 Validação de formulário Conheça o curso a distância: jquery na Prática 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: uol.com.br/ /validacao_de_formulario/ 3/18

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. uol.com.br/ /validacao_de_formulario/ 4/18

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){ uol.com.br/ /validacao_de_formulario/ 5/18

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 uol.com.br/ /validacao_de_formulario/ 6/18

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! Interação Comentários Imprimir Indicar Delicious Twitter 36 comentários Raphael Medeiros 01/06/2004 21h39 Validação! Muitas validações podem ser feitas utilizando Expressões Regulares.. será que existe alguma vantagem em se utilizar E.R ou não!?!? Béko uol.com.br/ /validacao_de_formulario/ 7/18

13/07/2004 03h12 Desconheço o código PhP Infelizmente, não tive oportunidades de estudar muito Php e tenho conhecimentos básios em Java Script, gostaria de saber se você poderia me auxiliar com o código em Php desse teste? Mande por e-mail se possível, Valeu! Marcus Vinícius Mont Alvao Mon 11/08/2004 13h45 Simples e de pura necessidade Bom pelo menos pra mim foi muito útil aki pois não lembrava mais como fazia validações no form via Javascript. Fui Felipe Queiroz Drumond 31/08/2004 00h48 Erro na validação do e-mail eu descobri um bug no seu sistema, quando se digita um e-mail como o meu que tem (. ) antes do @ ele diz que o e-mail não é válido!!! poderia nos dizer porque? Rogério Perez 05/09/2004 01h52 Dúvida Urgente com Matrizes tenho uma dúvida. Estou fazendo um sistema de validação, porém o nome dos campos são: vlr[1] vlr[2] etc.. qdo vou fazer a validação recebo um erro de js. O que devo fazer? Filipe 18/02/2005 10h32 O bug realmente existe uol.com.br/ /validacao_de_formulario/ 8/18

Mas é pata o "." usei "-" epassou. Usei "_"etb passou. Mas o "."nao passa. Isso anula a rotina. Alguma solução? Tiago Luis 23/03/2005 16h49 teste,pho Olá Tiago... o formulário deu certo sim, mas vcpoderia mepassar o conteúdo do arquivo "teste,php"? Meu e-mail: thifacco@yahoo.com.br. Obrigado Osmar Nilo de Jesus Lima Bezer 06/06/2005 02h02 A validacao de email nao funciona direito A validacao deemails nao esta funcionando para emails com ponto. Por exemplo nilo.lima@ac.gov.br Robson Adriano P. Suárez 07/07/2005 09h57 os pontos não esta validando :-( E mesmo! A validacao deemails não esta funcionando para emails com ponto. Por exemplo ro.adri@idataplus.com eu testei no formulário queesta deexemplo no site... Lia 14/07/2005 11h30 Dúvida além do aspecto do e-mail, tem uma coisa, eseeu colocar um número no meu nome? EX: Die2go Gostaria desaber como bloqueia isso: diego_ocara@hotmail.com oziel 01/08/2005 00h57 problema no código a validação dee-mail não funciona, quepena, o script é bom... uol.com.br/ /validacao_de_formulario/ 9/18

Rodrigo 25/08/2005 07h57 Validação por tags personalizadas <SCRIPT LANGUAGE=javascript> <!-- //-------------------------------------------- function CheckCampos() { var campo = document.forms[0]; var i=0; for (i=0 ;i < campo.elements.length ; i++ ){ var valida = campo.elements[i].getattribute("valida"); var valida_msg = campo.elements[i].getattribute("valida_msg"); valida = (( valida == null)? "" : valida ) valida_msg = (( valida_msg == null)? "Obrigatório" : valida_msg ) var value = campo.elements[i].getattribute("value"); var name = campo.elements[i].name; var s = new String() if ( valida.tolowercase() == "true" ) if ( value == "" ){ alert( valida_msg); campo.elements[i].focus(); return false; return true; //-------------------------------------------- function EnviaForm(){ if (!CheckCampos() ) return false; else alert("form Enviado"); //-------------------------------------------- --> </SCRIPT> <HTML> <BODY> <form name=fr method=post> <input type="text" name="txtvalor" valida="true" valida_msg="campo Obrigatório" /> <input type="button" name="bt" onclick="enviaform()" value="enviar" /> </form> </BODY> </HTML> Adriano Novaes 13/10/2005 10h37 uol.com.br/ /validacao_de_formulario/ 10/18

javascript so numero function bloqueia_alfa(){ if (event.keycode < 47 event.keycode >57){ event.keycode = 0; return false; else{ if (event.keycode == 47){ event.keycode = 0; return false; <input type="text" name="textfield" onfocus="retirabarras(this)" onblur="formatadata(this)" onkeypress="return bloqueia_alfa()"> Tiago Luis 09/02/2006 14h16 Interromper o envio do form Bem, quando a função de validação é executada, e encontra algum campo invalido, ela deve mostrar uma mensagem de erro, e dirigir o foco para o campo mal preenchido! Certo? No meu caso, isto acontece, mas o envio não é interrompido! Sendo assim, apesar de mostrar o erro, a validação não funciona! Coloquei o return false para todas as possibilidades de erro! e mesmo assim, o formulário é enviado para o servidor! Renato 05/04/2006 21h48 Dúvida Como fica a validação do "checkbox" Luis Gonzalo 04/05/2006 11h18 Firefox A validação do ponto antes da @ é um bug no Firefox, no IE funciona. Luis Gonzalo 04/05/2006 11h21 Correção uol.com.br/ /validacao_de_formulario/ 11/18

A validação do ponto antes da @ é um bug sim, para os dois navegadores. Daniel Henrique Santos Oliveira 22/05/2006 14h51 Muito Excelente Essa materia é muito boa. Facil e objetiva. Parabens. Leandro Follmann 02/07/2006 00h20 Disponibilizar Adorei o script, ficaria legal se disponibilizase o teste.php, para poder colocar o e-mail de destino, é possível? Isac Redua 06/09/2006 16h26 Validação de E-mail Na linha 31, substituir por: if (!(pos1 >= 3 && (pos1 pos2) >= 6 && qtd3 >= 9)) Assim passará a aceitar e-mails como por exemplo, ana.paula@hotmail.com Isac Redua 06/09/2006 16h28 correção da postagem anterior é ( pos1 pos2 ) Danilo Oliveira 21/12/2006 09h18 Excelente! O melhor artigo sobre validação de formulário que já encontrei na web. Simples, prático e o que é melhor, é passo à passo detalhado. Parabéns Thiago uol.com.br/ /validacao_de_formulario/ 12/18

Fabian Parrudex 29/12/2006 09h41 show a validação do email ficou show.. valeu!!! Leonardo Matos Lopes 11/02/2007 22h43 Excelente Muito boa a matéria! Me ajudou muito, eu não conheço nada de php nem JavaScript, e só foi preciso estudar os códigos mostrados pra fazer funcionar meu formulário direitinho! Sucesso, meu caro! aldo jean soares silva 10/05/2007 10h43 Parabéns Thiago Prado! Você tem boa didática e aborda o assunto de forma simples. Adilson Fragoso 01/03/2008 01h37 validação email não consegui ainda fazer com que seja aceito, email com ponto antes de @. Tentei de acordo com o comentário número 20 e 21, mas não deu certo Luciano Sturaro 19/05/2008 04h18 Agradecimento Me foi muito util esta função, funcionou perfeitamente até mesmo para e-mail com ponto antes do @. Para ficar 100% pro meu caso só falta dar uma polida em algumas partes. Se alguém quiser testar, temporiamente o teste pode ser feito aqui: http://www.hamtec.com.br/old/finalizar.php uol.com.br/ /validacao_de_formulario/ 13/18

Alexandre Iturres 03/02/2009 16h30 Validação de email <html> <head> <title>validando email</title> <script language="javascript"> <!-- function validaemail(entrada) { var entrada = entrada.email var arroba = entrada.value.indexof('@') var ponto = entrada.value.substring(arroba + 1, entrada.length) for (var i = 0; i < ponto.length; i++) { if (ponto.charat(i) == ".") { break if (entrada.value.length <= 0) { alert("email inválido!") return false if (arroba <= 3) { alert("preencha o email corretamente!") return false if (ponto.charat(i)!= ".") { alert("email incorreto") return false return true //--> </script> </head> <body> <form onsubmit="return validaemail(this)"> <input type="text" name="email" /> <input type="submit" value="ver" /> </form> </body> </html> Everton Rafael 03/04/2009 09h03 Está de parabéns Olha eu estava procurando na net a validação, achei um monte de exmplo... Mas esse é o melhor, está funcionando perfeitamente... Meus Parabéns Thiago! Muito Obrigado! uol.com.br/ /validacao_de_formulario/ 14/18

Abraços Paulo Henrique 12/09/2009 22h32 Muito bom, obrigado! O artigo ficou mto bom. Parabéns. Tem sim alguns probleminhas mas esta tudo muito simples e claro e me ajudou mto. Até Roberta Sanches 28/10/2009 11h57 dúvida Adorei o script, ficaria legal se disponibilizase o teste.php, para poder colocar o e-mail de destino, é possível? no seu aguardo. Matheus Wichman 17/01/2010 10h50 Bug no script Se digitar um email que contenha ponto antes do @ ele não aceita. Como resolvo? Lau 24/02/2010 22h27 Alguém conseguiu resolver a questão do ponto no email? Lau 24/02/2010 22h32 Resolveu pra mim aqui, fiz o seguinte: if (!(parte1 >= 3 && parte2 >= 0 && parte3 >= 9)) { :D uol.com.br/ /validacao_de_formulario/ 15/18

leonardo 17/03/2010 21h04 estou tentando montar uma página com um teste online: com perguntas: ex: quantas rodas tem um carro? no final um botão para ver se as respostas estão certas. Jonatan T.i. Superzoni Souza 24/03/2010 17h46 Boa tarde amigos,estou desenvolvendo um formulario de dados cadastrais.já está pronto,mas eu tenho a seguinte duvida.como eu fazo para não aceitar espaço em branco no inicio do campo.ex: Nome : Jonata.O correto é Nome:jonata,sem aceitar espaço em branco no inicio.por favor peso ajuda a vocês,pois tenho que terminar este projeto até sexta para meu chefe.fico muito grato se puderem me ajudar.att:jonata T.I. Cancelar resposta Qual a sua opinião? Se você já possui conta imasters, o login será feito abaixo. Nome: E-mail: Mensagem Comentário: moderados. Enviar comentário Sobre o Autor Atenção: comentários considerados spams e/ou ofensivos serão Thiago Prado Atua profissionalmente com desenvolvimento de projetos web em Flash, PHP e Java. pradogeracao@hotmail.com Outros artigos do mesmo autor: Open Cube DHTML Menu Efeito Elástico Menu Drop Down - Parte 02 Menu Drop Down Ver mais artigos de Thiago Prado Indique para um amigo uol.com.br/ /validacao_de_formulario/ 16/18

jquery 1.4.1 - Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais jquery 1.4.1 - Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais jquery 1.4.1 - Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais Aptana Studio 2.0.2.1257900705 - IDE voltado para desenvolvedores web, com suporte a HTML, CSS e JavaScript, além de Adobe AIR, iphone, PHP e Ruby on... CodeThatGrid JavaScript Grid 2.2.8 - Tabela avançada em JavaScript para exibição de muitos dados de maneira eficiente e organizada imasters uol.com.br/ /validacao_de_formulario/ 17/18

Sobre o imasters Política de privacidade Anuncie Feeds imasters Fóruns imasters Fale conosco 2001 - imasters FFPA Informática Ltda - Todos os direitos reservados. uol.com.br/ /validacao_de_formulario/ 18/18

uol.com.br/ /validacao_de_formulario/ 19/18