Validação de Formulário não Funciona...

Martinsrj · Julho 15, 2009

Olá pessoal, boa tarde!

Possuo o código abaixo, porem o usuario não está recebendo nenhuma critica quando deixa de prencher o primeiro campo.

Segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerência de Serviços de TI</title>

<link href="../estilos_portabilidade.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    margin-left: 0px;
}
-->
</style>
<script language="javascript">
function validaForm() {
d = document.inclusao;
if (d.txt_nome.projeto == ""){
    alert ("O campo Nome do Projeto deve ser preenchido!");
    d.txt_nome.projeto.focus();
    return false;
}
return true;
}


</script>


</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><!--#include file="topo.asp"--></td>
  </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#f5f5f5"><div align="center"> <br />
          <table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
            <tr>
              <td height="200" valign="top" bgcolor="#FFFFFF"><div align="center"> <br />
                  <br />
                <table width="98%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="69%" height="20"><span class="style2">Inclusão de Projeto</span></td>
                    <td width="31%"><div align="right">&nbsp;<a href="projetos.asp" class="menu27">Consultar Projeto</a> | <a href="alteracaodadosprojeto.asp" class="menu27">Alteração de Projeto</a> | <a href="#" class="menu27">Logout</a>&nbsp;&nbsp;&nbsp;</div></td>
                  </tr>
                </table> 
                <br />
                <table width="99%" border="0" cellspacing="0" cellpadding="0" >
                  <form name="inclusao" method="POST" action="ins.dadosprojeto.asp" onSubmit="return validaForm() "><tr>
                    <td><table width="100%" border="0" cellspacing="5" cellpadding="0">
                      <tr>
                        <td width="18%" height="35" bgcolor="f4f4f4" class="style3"><div align="right">Nome do Projeto:</div></td>
                        <td width="82%" bgcolor="f4f4f4">
                        <input type="text" name="txt_nome.projeto" class="campocombo" id="txt_status" size="70" />                        </td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Autor do Projeto:</div></td>
                        <td bgcolor="f4f4f4">
                        <input type="text" name="txt_autor.projeto" class="campocombo" id="txt_status" size="70" />
                        </td>
                      </tr>
                      <tr>
                        <td height="15" bgcolor="f4f4f4" class="style3"><div align="right">Escopo da Demanda/Projeto:</div></td>
                        <td height="15" bgcolor="f4f4f4"><label></label>
                              <div align="right" class="style3">
                                <div align="left">
                                  <textarea name="txt_escopo.projeto" id="txt_escopo.projeto" cols="90" rows="8" class="campocombo"></textarea>
                                </div>
                            </div></td>
                        </tr>
                      <tr>
                        <td height="15" bgcolor="f4f4f4" class="style3"><div align="right">Atividades Realizadas:</div></td>
                        <td height="15" bgcolor="f4f4f4">
                        <textarea name="txt_atividade" id="txt_atividade" cols="90" rows="12" class="campocombo"></textarea></td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Próximos Passos::</div></td>
                        <td bgcolor="f4f4f4"><label>
                        <textarea name="txt_proximo" id="txt_proximo" cols="90" rows="12" class="campocombo"></textarea>
                        </label></td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Pontos de Atenção:</div></td>
                        <td bgcolor="f4f4f4"><label>
                        <textarea name="txt_pontos" id="txt_pontos" cols="90" rows="12" class="campocombo"></textarea>
                        </label></td>
                      </tr>
                      <tr>
                        <td height="50" bgcolor="f4f4f4">&nbsp;</td>
                        <td bgcolor="f4f4f4"><label>
                          <input type="submit" name="btEnviar" id="btEnviar" class="botao" value="Cadastrar" />
                          <input type="reset" name="btLimpa" id="btLimpa" class="botao" value="Limpar" />
                        </label></td>
                      </tr>
                    </table></td>
                  </tr></form>
                </table>
                <br />
              
              </div></td>
            </tr>
          </table>
        <br />
    </div></td>
  </tr>
</table><!--#include file="rodape.asp"-->
</body>
</html>

fiote · Julho 15, 2009

1) Recomendo que use IDs para identificar os campos, ao invés de usar os nomes.

Ao invés de:

<input type="text" name="txt_nome.projeto" class="campocombo" id="txt_status" size="70" />

Poderia usar algo como:

<input type="text" id="txt_nome.projeto" class="campocombo" size="70" />~

2) No código JS, é aconselhável (e padrão da w3c), usar document.getElementById, ao invés de fazer referencia direta ao name, como você fez. Ao invés de:

d.txt_nome.projeto

Deveria usar algo como:

document.getElementById('txt_nome.projeto')

3) E pra complicar ainda mais, você usa um PONTO no nome do objeto. Quando você digita d.txt_nome.projeto, ele usa os pontos pra separar as coisas. d (definido uma linha antes) . txt_nome (variavel/elemento desconhecido) . projeto. (variavel/elemento desconhecido). Isso é um dos problemas. No modo explicado na parte 2, isso é resolvido. 4) Você está comparando o elemento, ao invés do valor do elemento. Ao invés de usar (já com a alteração da parte 2):

if (document.getElementById('txt_nome.projeto') == "")

Você deve usar:

if (document.getElementById('txt_nome.projeto').value== "")

;)

Editado Julho 15, 2009 por fiote

Martinsrj · Julho 15, 2009

Olá fiote!

Muito obrigado pela aula.

Coloquei a modificação que você mencionou, porem continua não exibindo nenhum alerta para o usuario:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerência de Serviços de TI</title>

<link href="../estilos_portabilidade.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    margin-left: 0px;
}
-->
</style>
<script language="JavasSript">
function validaForm() {
if (document.getElementById('txt_nome.projeto').value== "") {
    alert ("O campo Nome do Projeto deve ser preenchido!");
    d.txt_nome.projeto.focus();
    return false;
}
return true;
}

</script>


</head>

<body>

fiote · Julho 15, 2009

Coloque um alert(document.getElementById('txt_nome.projeto').value) antes do IF, pra ver o que aparece.

Martinsrj · Julho 15, 2009

Coloquei o código conforme abaixo, porem ao clicar no botão cadastrar não aparece nada:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerência de Serviços de TI</title>

<link href="../estilos_portabilidade.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    margin-left: 0px;
}
-->
</style>
<script language="JavasSript">
function validaForm() {
alert(document.getElementById('txt_nome.projeto').value)
if (document.getElementById('txt_nome.projeto').value== "") {
    alert ("O campo Nome do Projeto deve ser preenchido!");
    d.txt_nome.projeto.focus();
    return false;
}
return true;
}

</script>

fiote · Julho 15, 2009

Você esqueceu do passo 2 nesse aqui ó, d.txt_nome.projeto.focus();

Martinsrj · Julho 16, 2009

Boa noite!

Peço desculpas, mas não entendi.

O meu codigo esta dessa forma, desde já agradeco pelo esclarecimento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerência de Serviços de TI</title>

<link href="../estilos_portabilidade.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    margin-left: 0px;
}
-->
</style>
<script language="JavasSript">
function validaForm() {
if (document.getElementById('txt_nome.projeto').value== "") {
    alert ("O campo Nome do Projeto deve ser preenchido!");
    document.getElementById('txt_nome.projeto').focus();
    return false;
}
return true;
}

</script>


</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><!--#include file="topo.asp"--></td>
  </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#f5f5f5"><div align="center"> <br />
          <table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
            <tr>
              <td height="200" valign="top" bgcolor="#FFFFFF"><div align="center"> <br />
                  <br />
                <table width="98%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="69%" height="20"><span class="style2">Inclusão de Projeto</span></td>
                    <td width="31%"><div align="right">&nbsp;<a href="projetos.asp" class="menu27">Consultar Projeto</a> | <a href="alteracaodadosprojeto.asp" class="menu27">Alteração de Projeto</a> | <a href="#" class="menu27">Logout</a>&nbsp;&nbsp;&nbsp;</div></td>
                  </tr>
                </table> 
                <br />
                <table width="99%" border="0" cellspacing="0" cellpadding="0" >
                  <form name="inclusao" method="POST" action="ins.dadosprojeto.asp" onSubmit="return validaForm()"><tr>
                    <td><table width="100%" border="0" cellspacing="5" cellpadding="0">
                      <tr>
                        <td width="18%" height="35" bgcolor="f4f4f4" class="style3"><div align="right">Nome do Projeto:</div></td>
                        <td width="82%" bgcolor="f4f4f4">
                        <input type="text" name="txt_nome.projeto" class="campocombo" id="txt_nome.projeto" size="70" />                        </td>
                      </tr>

fiote · Julho 16, 2009

LOL, descobri o motivo.

http://www.w3schools.com/TAGS/tag_script.asp

Você está usando:

<script language="JavasSript">

Quando deveria usar?

<script type="text/javascript">

;)

Editado Julho 16, 2009 por fiote

Martinsrj · Julho 16, 2009

Bom dia Fiote!

Campeão, obrigado pelas dicas.

Usei o seguinte código abaixo e funciona normalmente no SO Windows XP Service Pack 3, porem quando coloco o mesmo script abaixo no servidor e rodo ele da o alerta, porem grava no banco.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerência de Serviços de TI</title>
&lt;script language="javascript">
function validaForm() {
if (document.inclusao.txt_nomeprojeto.value.length <= 1 )
{
alert("O campo Nome Projeto não pode ficar em branco - Digite o Nome Projeto.");
inclusao.txt_nomeprojeto.focus();
return false;
}
if (document.inclusao.txt_autorprojeto.value.length <= 1 )
{
alert("O campo Nome do Autor não pode ficar em branco - Digite o Nome do Autor.");
inclusao.txt_autorprojeto.focus();
return false;
}
if (document.inclusao.txt_escopoprojeto.value.length <= 1 )
{
alert("O campo Escopo não pode ficar em branco - Digite o Escopo.");
inclusao.txt_escopoprojeto.focus();
return false;
}
if (document.inclusao.txt_atividade.value.length <= 1 )
{
alert("O campo Atividades Realizadas não pode ficar em branco - Digite Atividades Realizadas.");
inclusao.txt_atividade.focus();
return false;
}
if (document.inclusao.txt_proximo.value.length <= 1 )
{
alert("O campo Próximos Passos não pode ficar em branco - Digite Próximos Passos.");
inclusao.txt_proximo.focus();
return false;
}
if (document.inclusao.txt_pontos.value.length <= 1 )
{
alert("O campo Pontos de Atenção não pode ficar em branco - Digite Pontos de Atenção.");
inclusao.txt_pontos.focus();
return false;
}

return true;
}
</script>  

<link href="../estilos_portabilidade.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
    margin-left: 0px;
}
-->
</style></head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><!--#include file="topo.asp"--></td>
  </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#f5f5f5"><div align="center"> <br />
          <table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
            <tr>
              <td height="200" valign="top" bgcolor="#FFFFFF"><div align="center"> <br />
                  <br />
                <table width="98%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="69%" height="20"><span class="style2">Inclusão de Projeto</span></td>
                    <td width="31%"><div align="right"> <a href="projetos.asp" class="menu27">Consultar Projeto</a> | <a href="alteracaodadosprojeto.asp" class="menu27">Alteração de Projeto</a> | <a href="#" class="menu27">Logout</a>   </div></td>
                  </tr>
                </table> 
                <br />
                <table width="99%" border="0" cellspacing="0" cellpadding="0">
                  <form name="inclusao" method="POST" action="ins.dadosprojeto.asp" onSubmit="return validaForm(this);"><tr>
                    <td><table width="100%" border="0" cellspacing="5" cellpadding="0">
                      <tr>
                        <td width="18%" height="35" bgcolor="f4f4f4" class="style3"><div align="right">Nome do Projeto:</div></td>
                        <td width="82%" bgcolor="f4f4f4">
                        <input type="text" name="txt_nomeprojeto" class="campocombo" id="txt_nomeprojeto" size="70" />                        </td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Autor do Projeto:</div></td>
                        <td bgcolor="f4f4f4">
                        <input type="text" name="txt_autorprojeto" class="campocombo" id="txt_autorprojeto" size="70" />
                        </td>
                      </tr>
                      <tr>
                        <td height="15" bgcolor="f4f4f4" class="style3"><div align="right">Escopo da Demanda/Projeto:</div></td>
                        <td height="15" bgcolor="f4f4f4"><label></label>
                              <div align="right" class="style3">
                                <div align="left">
                                  <textarea name="txt_escopoprojeto" id="txt_escopoprojeto" cols="90" rows="8" class="campocombo"></textarea>
                                </div>
                            </div></td>
                        </tr>
                      <tr>
                        <td height="15" bgcolor="f4f4f4" class="style3"><div align="right">Atividades Realizadas:</div></td>
                        <td height="15" bgcolor="f4f4f4">
                        <textarea name="txt_atividade" id="txt_atividade" cols="90" rows="12" class="campocombo"></textarea></td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Próximos Passos::</div></td>
                        <td bgcolor="f4f4f4"><label>
                        <textarea name="txt_proximo" id="txt_proximo" cols="90" rows="12" class="campocombo"></textarea>
                        </label></td>
                      </tr>
                      <tr>
                        <td height="35" bgcolor="f4f4f4" class="style3"><div align="right">Pontos de Atenção:</div></td>
                        <td bgcolor="f4f4f4"><label>
                        <textarea name="txt_pontos" id="txt_pontos" cols="90" rows="12" class="campocombo"></textarea>
                        </label></td>
                      </tr>
                      <tr>
                        <td height="50" bgcolor="f4f4f4"> </td>
                        <td bgcolor="f4f4f4"><label>
                          <input type="submit" name="btEnviar" id="btEnviar" class="botao" value="Cadastrar" />
                          <input type="reset" name="btLimpa" id="btLimpa" class="botao" value="Limpar" />
                        </label></td>
                      </tr>
                    </table></td>
                  </tr></form>
                </table>
                <br />
              
              </div></td>
            </tr>
          </table>
        <br />
    </div></td>
  </tr>
</table><!--#include file="rodape.asp"-->
</body>
</html>

Desde já agradeço pelo esclarecimento.

Editado Julho 17, 2009 por Jonathan Queiroz
Remover quotes desnecessários (Jonathan)

fiote · Julho 16, 2009

Já arrumou o passo 2? (e pare de quotar/citar minhas mensagens lol)

Editado Julho 16, 2009 por fiote

Martinsrj · Julho 16, 2009

Já arrumei!

fiote · Julho 16, 2009

"Já arrumei" quer dizer "agora funcionou" ?

Porque aqui em casa nos testes que eu fiz, funcionou sim =)

Martinsrj · Julho 16, 2009

O seu Funcionou no Windows 2003 server?

"Já arrumei" quer dizer "agora funcionou" ?
Porque aqui em casa nos testes que eu fiz, funcionou sim =)

fiote · Julho 16, 2009

LOL.

Desculpe, mas eu não tenho um pc com windows 2003 server aqui (wtf?). Além disso, acho que não tem a ver com o SO.

Testei no Firefox 3.5 e no IE 6. Funcionou.

Martinsrj · Julho 16, 2009

No meu também funcionou, porem apenas no Windows XP.

Desde já agradeço pelas suas ajudas.

LOL.
Desculpe, mas eu não tenho um pc com windows 2003 server aqui (wtf?). Além disso, acho que não tem a ver com o SO.
Testei no Firefox 3.5 e no IE 6. Funcionou.

fiote · Julho 16, 2009

Bem, se você já mudou todas as partes de document.getElementById e continua dando erro... não faço idéia do que pode ser. Boa sorte ae.

Entrar

Validação de Formulário não Funciona...

Pergunta

Link para o comentário

Compartilhar em outros sites

15 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns