Por uma internet mais criativa e dinâmica

Transcrição

1 BATE-PAPO 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 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

2 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 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

3 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

4 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> </td> <td><input name=" " 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

5 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(); 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; //validar senha 16 if (d.senha.value == ""){ 17 alert("o campo " + d.senha.name + " deve ser preenchido!"); 18 d.senha.focus(); 19 return false; //validar 22 if (d. .value == ""){ 23 alert("o campo " + d. .name + " deve ser preenchido!"); 24 d. .focus(); 25 return false; //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 return false; //validar telefone 37 if (d.telefone.value == ""){ 38 alert ("O campo " + d.telefone.name + " deve ser preenchido!"); 39 d.telefone.focus(); 40 return false; //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; //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

6 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; else { 64 alert("formato de data invalido!"); 65 d.nasce.focus(); 66 return false; //validar sexo 69 if (!d.sexo[0].checked &&!d.sexo[1].checked) { 70 alert("escolha o sexo!") 71 return false; 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 . 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 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 é 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

7 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/ h39 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

8 13/07/ h12 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 se possível, Valeu! Marcus Vinícius Mont Alvao Mon 11/08/ h45 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/ h48 Erro na validação do eu descobri um bug no seu sistema, quando se digita um como o meu que tem (. ) antes ele diz que o não é válido!!! poderia nos dizer porque? Rogério Perez 05/09/ h52 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/ h32 O bug realmente existe uol.com.br/ /validacao_de_formulario/ 8/18

9 Mas é pata o "." usei "-" epassou. Usei "_"etb passou. Mas o "."nao passa. Isso anula a rotina. Alguma solução? Tiago Luis 23/03/ h49 teste,pho Olá Tiago... o formulário deu certo sim, mas vcpoderia mepassar o conteúdo do arquivo "teste,php"? Meu thifacco@yahoo.com.br. Obrigado Osmar Nilo de Jesus Lima Bezer 06/06/ h02 A validacao de nao funciona direito A validacao de s nao esta funcionando para s com ponto. Por exemplo nilo.lima@ac.gov.br Robson Adriano P. Suárez 07/07/ h57 os pontos não esta validando :-( E mesmo! A validacao de s não esta funcionando para s com ponto. Por exemplo ro.adri@idataplus.com eu testei no formulário queesta deexemplo no site... Lia 14/07/ h30 Dúvida além do aspecto do , 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/ h57 problema no código a validação de não funciona, quepena, o script é bom... uol.com.br/ /validacao_de_formulario/ 9/18

10 Rodrigo 25/08/ h57 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/ h37 uol.com.br/ /validacao_de_formulario/ 10/18

11 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/ h16 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/ h48 Dúvida Como fica a validação do "checkbox" Luis Gonzalo 04/05/ h18 Firefox A validação do ponto antes é um bug no Firefox, no IE funciona. Luis Gonzalo 04/05/ h21 Correção uol.com.br/ /validacao_de_formulario/ 11/18

12 A validação do ponto antes é um bug sim, para os dois navegadores. Daniel Henrique Santos Oliveira 22/05/ h51 Muito Excelente Essa materia é muito boa. Facil e objetiva. Parabens. Leandro Follmann 02/07/ h20 Disponibilizar Adorei o script, ficaria legal se disponibilizase o teste.php, para poder colocar o de destino, é possível? Isac Redua 06/09/ h26 Validação de Na linha 31, substituir por: if (!(pos1 >= 3 && (pos1 pos2) >= 6 && qtd3 >= 9)) Assim passará a aceitar s como por exemplo, ana.paula@hotmail.com Isac Redua 06/09/ h28 correção da postagem anterior é ( pos1 pos2 ) Danilo Oliveira 21/12/ h18 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

13 Fabian Parrudex 29/12/ h41 show a validação do ficou show.. valeu!!! Leonardo Matos Lopes 11/02/ h43 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/ h43 Parabéns Thiago Prado! Você tem boa didática e aborda o assunto de forma simples. Adilson Fragoso 01/03/ h37 validação não consegui ainda fazer com que seja aceito, com ponto antes Tentei de acordo com o comentário número 20 e 21, mas não deu certo Luciano Sturaro 19/05/ h18 Agradecimento Me foi muito util esta função, funcionou perfeitamente até mesmo para com ponto antes 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: uol.com.br/ /validacao_de_formulario/ 13/18

14 Alexandre Iturres 03/02/ h30 Validação de <html> <head> <title>validando </title> <script language="javascript">  </script> </head> <body> <form onsubmit="return valida (this)"> <input type="text" name=" " /> <input type="submit" value="ver" /> </form> </body> </html> Everton Rafael 03/04/ h03 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

15 Abraços Paulo Henrique 12/09/ h32 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/ h57 dúvida Adorei o script, ficaria legal se disponibilizase o teste.php, para poder colocar o de destino, é possível? no seu aguardo. Matheus Wichman 17/01/ h50 Bug no script Se digitar um que contenha ponto antes ele não aceita. Como resolvo? Lau 24/02/ h27 Alguém conseguiu resolver a questão do ponto no ? Lau 24/02/ h32 Resolveu pra mim aqui, fiz o seguinte: if (!(parte1 >= 3 && parte2 >= 0 && parte3 >= 9)) { :D uol.com.br/ /validacao_de_formulario/ 15/18

16 leonardo 17/03/ h04 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/ h46 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: 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

17 jquery Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais jquery Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais jquery Biblioteca de Javascript rápida e concisa que simplifica a forma de cruzar documentos de HTML, suportar eventos e muito mais Aptana Studio 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 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

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

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