Ir para conteúdo
Fórum Script Brasil
  • 0

Validação De Campos Do Formulario


Nill

Pergunta

Estou com o seguinte problema, tenho um formulario, que envia os dados ao banco MYSQL, ta funcionando perfeitamente, agora estou amarrando os campos do formulario. Peguei um Java script que valida o campo CPF e email, e também verifica se o usuário não preencheu algum campo do formulario.

O meu problema e o seguinte:

<form method="post" action="cad_cliente.php" onSubmit="return enviardados();" onSubmit="return Verifica_campo_CPF(campo);">
Observe que tenho a função onSubmit="return enviardados();", quando se clica no botão enviar e que execulta esta função, no script acima. O meu Problema é no botão enviar, pois não usei o button padrão, eu usei uma imagem no lugar do button, e ficou conforme abaixo;
<input type="image" class="formobjects" src="images/button_continue.gif" border="0" alt="Continuar" title=" Continuar " name="continuar" width="107" height="22">
Como devo proceder para que, quando clicar no botão continuar, antes de enviar os dados, execulte a função onSubmit="return enviardados();", que esta dentro do corpo do script Java, para validar o meus campos. Pois se tivesse usando o Button Submit era tranquilo, funciona perfeitamente, so não estou sabendo como fazer para que funciona usando imagens em vez de button. Quem quiser ver o formulario pra ter uma ideia
http://www.vigacaldeiraria.com.br/pim/cadastro.html
Pra ficar mais facil de entender, ai esta o codigo do formulario completo
<html>
<head>
    <title>Cadastro de Cliente</title>
    <script type="text/javascript" src="testasenha.js"></script>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

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

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


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

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

return true; 
} 
function Verifica_campo_CPF(campo) {
var CPF = campo.value; // Recebe o valor digitado no campo



// Aqui começa a checagem do CPF
var POSICAO, I, SOMA, DV, DV_INFORMADO;
var DIGITO = new Array(10);
DV_INFORMADO = CPF.substr(9, 2); // Retira os dois últimos dígitos do número informado

// Desemembra o número do CPF na array DIGITO
for (I=0; I<=8; I++) {
  DIGITO[I] = CPF.substr( I, 1);
}

// Calcula o valor do 10º dígito da verificação
POSICAO = 10;
SOMA = 0;
   for (I=0; I<=8; I++) {
      SOMA = SOMA + DIGITO[I] * POSICAO;
      POSICAO = POSICAO - 1;
   }
DIGITO[9] = SOMA % 11;
   if (DIGITO[9] < 2) {
        DIGITO[9] = 0;
}
   else{
       DIGITO[9] = 11 - DIGITO[9];
}

// Calcula o valor do 11º dígito da verificação
POSICAO = 11;
SOMA = 0;
   for (I=0; I<=9; I++) {
      SOMA = SOMA + DIGITO[I] * POSICAO;
      POSICAO = POSICAO - 1;
   }
DIGITO[10] = SOMA % 11;
   if (DIGITO[10] < 2) {
        DIGITO[10] = 0;
   }
   else {
        DIGITO[10] = 11 - DIGITO[10];
   }

// Verifica se os valores dos dígitos verificadores conferem
DV = DIGITO[9] * 10 + DIGITO[10];
   if (DV != DV_INFORMADO) {
      alert('CPF inválido');
      campo.value = '';
      campo.focus();
      return false;
   } 
}

</script>
<body>
      <form method="post" action="cad_cliente.php" onSubmit="return enviardados();" onSubmit="return Verifica_campo_CPF(campo);">
      <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
             <tr>
                 <td>
                      <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2">
                            <tr>
                                <td class="pageHeading">Informações de Minha Conta</td>
                                <td class="pageHeading" align="right">&nbsp;</td>
                            </tr>
                     </table>
                 </td>
             </tr>
             
             <tr>
                 <td>
                     <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10">
                 </td>
             </tr>
             <tr>
                 <td class="smallText"><br><small><font color="#FF0000"><b>NOTA:</b></font></small>
                     Se você já possui uma conta conosco, por favor faça seu login na <a target="_parent" href="login.html"><u>Página de login</u></a>.
                 </td>
             </tr>
             
             <tr>
                 <td>
                     <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10">
                 </td>
             </tr>

             <tr>
                 <td>
                     <table border="0" width="100%" cellspacing="0" cellpadding="2" id="table3">
             <tr>
                 <td class="main"><b>Seus detalhes Pessoais</b></td>
                 <td class="inputRequirement" align="right">* Preenchimento obrigatório</td>
             </tr>
      </table></td></tr>
      
      <tr>
          <td>
              <table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox" id="table4">
              <tr class="infoBoxContents">
                  <td><table border="0" cellspacing="2" cellpadding="2" id="table5">
              <tr>
                  <td class="main">Sexo:</td>
                  <td class="main">
                  <input type="radio" name="sexo" value="m" checked>&nbsp;&nbsp;Masculino&nbsp;&nbsp;<input type="radio" name="sexo" value="f">&nbsp;&nbsp;Feminino&nbsp;<span class="inputRequirement">*</span></td>
              </tr>

              <tr>
                  <td class="main">Nome:</td>
                  <td class="main"><input type="text" name="nome" id="nome" class="formbutton">&nbsp;<span class="inputRequirement">*</span></td>
              </tr>

              <tr>
                  <td class="main">Sobrenome:</td>
                  <td class="main"><input type="text" name="sobrenome">&nbsp;<span class="inputRequirement">*</span></td>
              </tr>

              <tr>
                  <td class="main">CPF:</td>
                  <td class="main"><input type="text" name="cpf" onBlur="Verifica_campo_CPF(this)">&nbsp; <span class="inputRequirement">*</span></td>
              </tr>


              <tr>
                  <td class="main">RG:</td>
                  <td class="main"><input type="text" name="rg" onBlur="Verifica_campo_CPF(this)">&nbsp;<span class="inputRequirement">*</span></td>
              </tr>

              <tr>
                  <td class="main">Data de Nascimento:</td>
                  <td class="main"><input type="text" name="dtnasc">&nbsp;<span class="inputRequirement">*(ex. 21/05/1970)</span></td>
              </tr>
              
              <tr>
                  <td class="main">E-Mail:</td>
                  <td class="main"><input type="text" name="email">&nbsp;<span class="inputRequirement">*</span></td>
              </tr>
              </table></td></tr>
          </table></td></tr>

          <tr>
              <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
          </tr>

          <tr>
              <td class="main"><b>Seu Endereço</b></td>
          </tr>

          <tr>
              <td>
                  <table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox" id="table6">
                         <tr class="infoBoxContents">
                             <td>
                                 <table border="0" cellspacing="2" cellpadding="2" id="table7">
                                        <tr>
                                            <td class="main">Endereço:</td>
                                            <td class="main"><input type="text" name="endereco">&nbsp;<span class="inputRequirement">*</span></td>
                                        </tr>

                                        <tr>
                                            <td class="main">Bairro:</td>
                                            <td class="main"><input type="text" name="bairro">&nbsp;</td>
                                        </tr>

                                        <tr>
                                            <td class="main">CEP:</td>
                                            <td class="main"><input type="text" name="cep">&nbsp;<span class="inputRequirement">*</span></td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="main">Cidade:</td>
                                            <td class="main"><input type="text" name="cidade">&nbsp;<span class="inputRequirement">*</span></td>
                                        </tr>

                                        <tr>
                                            <td class="main">Estado:</td>
                                            <td class="main">
                                            <select name="estado">
                                                    <option value="" SELECTED>Por favor selecione</option>
                                                    <option value="Acre">Acre</option>
                                                    <option value="Alagoas">Alagoas</option>
                                                    <option value="Amapa">Amapa</option>
                                                    <option value="Amazonas">Amazonas</option>
                                                    <option value="Bahia">Bahia</option>
                                                    <option value="Ceara">Ceara</option>
                                                    <option value="Distrito Federal">Distrito Federal</option>
                                                    <option value="Espirito Santo">Espirito Santo</option>
                                                    <option value="Goias">Goias</option>
                                                    <option value="Maranhao">Maranhao</option>
                                                    <option value="Mato Grosso">Mato Grosso</option>
                                                    <option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
                                                    <option value="Minas Gerais">Minas Gerais</option>
                                                    <option value="Para">Para</option>
                                                    <option value="Paraiba">Paraiba</option>
                                                    <option value="Parana">Parana</option>
                                                    <option value="Pernambuco">Pernambuco</option>
                                                    <option value="Piaui">Piaui</option>
                                                    <option value="Rio de Janeiro">Rio de Janeiro</option>
                                                    <option value="Rio Grande do Norte">Rio Grande do Norte</option>
                                                    <option value="Rio Grande do Sul">Rio Grande do Sul</option>
                                                    <option value="Rondonia">Rondonia</option>
                                                    <option value="Roraima">Roraima</option>
                                                    <option value="Santa Catarina">Santa Catarina</option>
                                                    <option value="são Paulo">são Paulo</option>
                                                    <option value="Sergipe">Sergipe</option>
                                            </select> <span class="inputRequirement">*                                           </td>
                                        </tr>
                                 </table>
                             </td>
                         </tr>
                  </table>
              </td>
          </tr>

          <tr>
              <td>
                  <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
              </tr>

          <tr>
              <td class="main"><b>Suas Informações de Contato</b></td>
          </tr>

          <tr>
              <td>
                  <table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox" id="table8">
                         <tr class="infoBoxContents">
                         <td>
                             <table border="0" cellspacing="2" cellpadding="2" id="table9">
                                    <tr>
                                        <td class="main">Telefone:</td>
                                        <td class="main"><input type="text" name="telefone">&nbsp;<span class="inputRequirement">*</span></td>
                                    </tr>

                                    <tr>
                                        <td class="main">Fax:</td>
                                        <td class="main"><input type="text" name="fax">&nbsp;</td>
                                    </tr>
                             </table>
                         </td>
                         </tr>
                  </table>
              </td>
         </tr>

      </tr>
      <tr>
          <td>
          <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
      </tr>

      <tr>
          <td class="main"><b>Sua Senha</b></td>
      </tr>

      <tr>
          <td>
              <table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox" id="table12">
                     <tr class="infoBoxContents">
                         <td>
                             <table border="0" cellspacing="2" cellpadding="2" id="table13">
                                    <tr>
                                        <td class="main">Senha:</td>
                                        <td class="main"><input type="password" name="senha" maxlength="40">&nbsp;<span class="inputRequirement">*</span></td>
                                    </tr>

                                    <tr>
                                        <td class="main">Confirmação de Senha:</td>
                                        <td class="main"><input type="password" name="confirmasenha" onKeyUp="testaSenha(this.value)" maxlength="40">&nbsp;<span class="inputRequirement">*</span></td>
                                        <td></td><td><div id='seguranca'><h4>Segurança da senha: !</h4></div></td>
                                    </tr>
                             </table>
                         </td>
                     </tr>
              </table>
          </td>
      </tr>
      
      <tr>
          <td>
              <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
          </tr>

          <tr>
              <td>
                  <table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox" id="table14">
                         <tr class="infoBoxContents">
                             <td>
                                 <table border="0" width="100%" cellspacing="0" cellpadding="2" id="table15">
                                        <tr>
                                            <td width="10">
                                            <img src="images/pixel_trans.gif" border="0" alt="" width="10" height="1"></td>
                                            <td>
                                                <input type="image" class="formobjects" src="images/button_continue.gif" border="0" alt="Continuar" title=" Continuar " name="continuar" width="107" height="22"> </td>
                                                <td width="10">
                                                <img src="images/pixel_trans.gif" border="0" alt="" width="10" height="1">
                                            </td>
                                        </tr>
                                 </table>
                             </td>
                         </tr>
                  </table>
              </td>
          </tr>
</table>
</form>

</body>
</html>

Editado por Nill
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

uma ideia ae

<input type="image" class="formobjects" src="images/button_continue.gif" border="0" alt="Continuar" title=" Continuar " name="continuar" width="107" height="22" onclick="java script:enviardados();">
function enviardados()
{
    vErros = 0;
    if(document.dados.nome.value=="" || document.dados.nome.value.length < 8)
    {
        alert( "Preencha campo NOME corretamente!" );
        document.dados.nome.focus();
        vErros = 1;
    }
    if( document.dados.mail.value=="" || document.dados.email.value.indexOf('@')==-1 || document.dados.email.value.indexOf('.')==-1 )
    {
        alert( "Preencha campo E-MAIL corretamente!" );
        document.dados.email.focus();
        vErros = 1;
    }
    if (document.dados.CPF.value=="")
    {
        alert( "Preencha o campo CPF!" );
        document.dados.CPF.focus();
        vErros = 1;
    }
    if(vErros = 0)
    {
        document.dados.submit();
    }
}

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...