Bom pessoal 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_email", E-mail chamamos de "tx_email" e por fim o campo Mensagem "tx_mensagem" - todos sem aspas.
Para começarmos a validação escreveremos o seguinte código no " " da página.
!--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...
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.
exemplo da validação feita por codigofonte.net
[exemplo
Creditos: codigofonte.com e melidor
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_email", E-mail chamamos de "tx_email" e por fim o campo Mensagem "tx_mensagem" - todos sem aspas.
Código:
<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"> </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>
Para começarmos a validação escreveremos o seguinte código no " " da página.
Código:
<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;
}
!--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...
Código:
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.
exemplo da validação feita por codigofonte.net
[exemplo
Creditos: codigofonte.com e melidor