Olá! Quarta Feira, 07 de Janeiro de 2009.


Dicas CódigoFonte.net
Domingo, 05 de Fevereiro 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--> 


<form action="pagina de ação" method="post" name="dados" onSubmit="return enviardados();" >
  <table width="588" border="0" align="center" >
    <tr>
      <td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Nome completo:</font></td>
      <td width="460">
        <input name="tx_nome" type="text" class="formbutton" id="tx_nome" size="52" maxlength="150">
      </td>
    </tr>
    <tr>
      <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
      <td><font size="2">
        <input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
      </font></td>
    </tr>
    <tr>
      <td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Mensagem<strong>:</strong></font></font></td>
      <td rowspan="2"><font size="2">
        <textarea name="tx_mensagem" cols="50" rows="8" class="formbutton" id="tx_mensagem" input ></textarea>
      </font></td>
    </tr>
    <tr>
      <td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
      </font></font></strong></p></td>
    </tr>
    <tr>
      <td height="22">&amp;nbsp;</td>
      <td>
        <input name="Submit" type="submit"  class="formobjects" value="Enviar dados">

        <input name="Reset" type="reset" class="formobjects" value="Redefinir">
      </td>
    </tr>
  </table>
</form>


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


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

<!--VALIDA FORMULÁRIO--> 

<script language="JavaScript" >
function enviardados(){

if(document.dados.tx_nome.value=="" || document.dados.tx_nome.value.length < 8)
{
alert( "Preencha campo NOME corretamente!" );
document.dados.tx_nome.focus();
return false;
}


if( document.dados.tx_email.value=="" || document.dados.tx_email.value.indexOf('@')==-1 || document.dados.tx_email.value.indexOf('.')==-1 )
{
alert( "Preencha campo E-MAIL corretamente!" );
document.dados.tx_email.focus();
return false;
}

if (document.dados.tx_mensagem.value=="")
{
alert( "Preencha o campo MENSAGEM!" );
document.dados.tx_mensagem.focus();
return false;
}

if (document.dados.tx_mensagem.value.length < 50 )
{
alert( "É necessario preencher o campo MENSAGEM com mais de 50 caracteres!" );
document.dados.tx_mensagem.focus();
return false;
}

return true;
}

</script>

<!--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... 

document.dados.tx_nome.value=="" || document.dados.tx_nome.value.length < 8
{
alert( "Preencha campo NOME corretamente!" );
document.dados.tx_nome.focus();
return false;
}


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 jean@advancedsite.net

Valeu fiquem com Deus!

Comentários do artigo [Novo comentário]

Cleber - 16 de Dezembro 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 !
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:




Melhor Visualizado com
800x600 de Resolução
CodigoFonte.net » CodigoFonte.eti.br » Procurando o que comprar? » MeuMural.com.br » Todos os Direitos Reservados © 2002/2008

Procurando Notebooks, Câmeras Digitais, iPhones?

CompreDeTudo.com