Nenhuma avalição
COMENTAR
INDICAR
Validação de Formulário por Javascript - MUITO BOMPostada em: 19/02/2006
Bom pessoal depois de alguns pedidos estou colocando um artigo de validação de formulário em Javascript, oque 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\"><br>
</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>
<!--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 [b].[/b] \"ponto\"- for igual a -\"menos\" 1 - ou seja não exite dentro do campo, e o e-mail é invalido.
E logo depois chamamamos a função do javascript que nomeamos como enviardados() pelo onSubmit=\"return enviardados();\" que está dentro da área do formulário.
=====================================================================================
Coloquei um exmplo dessa validação - www.advancedsite.net/validar/ - é só acessar.
Espero que tenham gostado.
Dúvidas estou a disposição jean@advancedsite.net
Valeu fiquem com Deus!
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\"><br>
</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>
<!--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 [b].[/b] \"ponto\"- for igual a -\"menos\" 1 - ou seja não exite dentro do campo, e o e-mail é invalido.
E logo depois chamamamos a função do javascript que nomeamos como enviardados() pelo onSubmit=\"return enviardados();\" que está dentro da área do formulário.
=====================================================================================
Coloquei um exmplo dessa validação - www.advancedsite.net/validar/ - é só acessar.
Espero que tenham gostado.
Dúvidas estou a disposição jean@advancedsite.net
Valeu fiquem com Deus!
Enviado por USUÁRIO REMOVIDO em 7 de abril de 2007 Olá, possuo um blog que aborda, entre outros temas, Javascript, além de UML com Javascript, ou seja, Javascript Orientado a Objetos. Dá uma olhada lá!
http://www.prosadigital.com/2007/04/uml-e-javascript-captulo-1.html
