Olá! Friday, 28 de April de 2017.



Dicas CódigoFonte.net
Sunday, 05 de February de 2006

Validação de Formulário em Javascript

Bom pessoal depois de alguns pedidos estou colocando um artigo de validação de formulário em Javascript, o que hoje em dia é muito usado.

Criaremos nosso formulário onde o usuário entrará com os dados para contato ou coisa desse tipo.

O principal de tudo é colocar nome nos campos, pois é a partir dos nomes que validamos

O nosso formulário chamaremos de " dados ", o campo nome - chamamos de "tx_nome", E-mail chamamos de "tx_email" e por fim o campo Mensagem "tx_mensagem" - todos sem aspas.

<!--CODIGO DO FORMULÁRIO-->

  1.  
  2. <form action="pagina de ação" method="post" name="dados" onSubmit="return enviardados();" >
  3.   <table width="588" border="0" align="center" >
  4.     <tr>
  5.       <td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Nome completo:</font></td>
  6.       <td width="460">
  7.         <input name="tx_nome" type="text" class="formbutton" id="tx_nome" size="52" maxlength="150">
  8.       </td>
  9.     </tr>
  10.     <tr>
  11.       <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
  12.       <td><font size="2">
  13.         <input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
  14.       </font></td>
  15.     </tr>
  16.     <tr>
  17.       <td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Mensagem<strong>:</strong></font></font></td>
  18.       <td rowspan="2"><font size="2">
  19.         <textarea name="tx_mensagem" cols="50" rows="8" class="formbutton" id="tx_mensagem" input ></textarea>
  20.       </font></td>
  21.     </tr>
  22.     <tr>
  23.       <td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
  24.       </font></font></strong></p></td>
  25.     </tr>
  26.     <tr>
  27.       <td height="22">&amp;nbsp;</td>
  28.       <td>
  29.         <input name="Submit" type="submit"  class="formobjects" value="Enviar dados">
  30.  
  31.         <input name="Reset" type="reset" class="formobjects" value="Redefinir">
  32.       </td>
  33.     </tr>
  34.   </table>
  35. </form>
  36.  


<!--CODIGO DO FORMULÁRIO-->


Para começarmos a validação escreveremos o seguinte código no "<head> </head>" da página.

<!--VALIDA FORMULÁRIO-->
  1.  
  2. <script language="JavaScript" >
  3. function enviardados(){
  4.  
  5. if(document.dados.tx_nome.value=="" || document.dados.tx_nome.value.length < 8)
  6. {
  7. alert( "Preencha campo NOME corretamente!" );
  8. document.dados.tx_nome.focus();
  9. return false;
  10. }
  11.  
  12.  
  13. if( document.dados.tx_email.value=="" || document.dados.tx_email.value.indexOf('@')==-1 || document.dados.tx_email.value.indexOf('.')==-1 )
  14. {
  15. alert( "Preencha campo E-MAIL corretamente!" );
  16. document.dados.tx_email.focus();
  17. return false;
  18. }
  19.  
  20. if (document.dados.tx_mensagem.value=="")
  21. {
  22. alert( "Preencha o campo MENSAGEM!" );
  23. document.dados.tx_mensagem.focus();
  24. return false;
  25. }
  26.  
  27. if (document.dados.tx_mensagem.value.length < 50 )
  28. {
  29. alert( "É necessario preencher o campo MENSAGEM com mais de 50 caracteres!" );
  30. document.dados.tx_mensagem.focus();
  31. return false;
  32. }
  33.  
  34. return true;
  35. }
  36.  
  37. </script>
  38.  

<!--VALIDA FORMULÁRIO-->

======== Entendendo o código =========

Logo no começo temos um if que verifica se o o campo Nome nomeado como "tx_nome" está vazio ou se ele contém o n° de caracteres menore que 8.

Analizando...

  1. document.dados.tx_nome.value=="" || document.dados.tx_nome.value.length < 8
  2. {
  3. alert( "Preencha campo NOME corretamente!" );
  4. document.dados.tx_nome.focus();
  5. return false;
  6. }
  7.  


Percebemos que o Javascript vai pegando por partes, ao especificarmos o caminho de cada campo.
document (O documento - arquivos)
dados (O nome do Formulário)
txNome (O nome do Campo)
value (Seu valor)
lenght (Analiza a quantidade de caracteres do campo )
focus() (Coloca o cursor do mouse no campo especificado )
indexOf(' ') (Analiza o conteúdo do campo )

No caso acima validamos do modo que se o campo estiver em branco ou a qantidade de caracteres for menor que 8 o Nome é inválido, então ele mostra uma mensagem de alerta e não envia o formulário, pois ao estar nesse estado declaramos que seu retorno é falso "return false.

Nos outros casos como o campo Mensagem segue a mesma rotina.

Agora para validarmos um e-mail vemos se ele contém . "ponto" ou "@ arroba, se não tiver não é um e-mail válido certo?!?!?!
Fazemos do mesmo modo como antes só que invéz de validar a quantidade de caracteres validamos o seu conteúdo em si.

Com o parâmetro indexOf(' ') que como disse analiza o conteúdo dos campos.
Vemos se o que foi digitado no campo E-mail contém @ "arroba" - ou . "ponto" :

( indexOf('@ ')==-1 ) se o @ "arroba" for igual a - "menos" 1 ou se o . "ponto"- for igual a - "menos" 1 - ou seja não exite dentro do campo, e o e-mail é invalido.


===================================
Coloquei um exemplo dessa validação - http://www.codigofonte.net/img/dicas/166/ - é só acessar.
Espero que tenham gostado.
Dúvidas estou a disposição [email protected]

Valeu fiquem com Deus!

Comentários do artigo [Novo comentário]

Cleber - 16 de December de 2008 - 16:54
nuss... Muuito bom kara..

eu sou iniciante no assunto sabe ,,

tenho minhas duvidas ..

duvidas bobas pra voc?.. que pra mim... ? dificuldade danada ..

como por exemplo aonde eu ponho meu e-mail

para que a menssagem seja me enviada..

ii tambem queria saber si eu posso por e-mail da gmail ..

tirando isso .. ta tudo muito maneiro .. ii bem explicado

OBRIGADO !
marcio luiz de sousa - 02 de March de 2009 - 21:12
~~~~~~~~~~~~~~~~~~~~~~~~~~
Joailson Régis Bezerra - 02 de April de 2010 - 17:32
Como o amigo Cleber citou vc esqueceu de dizer onde é colocado o email para enviou?
Jean Carlos - 03 de April de 2010 - 13:44
Na vdd esse ae é VALIDAÇÃO de formulário, vc pode validar um formulario de consultar, de busca etc, não necessariamente de envio de e-mail, pois envio de é FEITO com ASP, PHP por exemplo, essa rotina acima valida não permitindo informaçoes incorretas como num cadastro.
Paulo Augusto Zucatti Tascheti - 22 de June de 2010 - 12:52
Muito Boa essa validadeção Jean, eu tenho uma pagina enviar.php ela executa com esse script mais não está enviando para o meu e-mail, gostaria de saber se voçe pode me passar o código para enviar por e-mail? fico muito grato. [email protected]
Fred Passos - 06 de December de 2010 - 02:46
Jean, sei que esse script é apenas para validação, num entanto quero saber de você se pode me orientar no procedimento para que quando o visitante enviar, chegue até minha cx de e-mail?
Obrigado!
[email protected]
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010