Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Oficina da Net » Programação » JavaScript

Validação de Formulário em Javascript

Publicado em: 09/07/2007 | JavaScript | Visualizações: 10.719 | 0 Comentário(s)

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

<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"><br>

</font></font></strong></p></td>

</tr>

<tr>

<td height="22">&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.

=======================
Conheça nosso parceiro: