Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kelvim

Jquery + plugin validação não valida ao submeter.

Recommended Posts

Ola galera, bom dia

 

to com um problema e depois de quebrar a cabeça por ai resolvi perguntar para vocês,

 

tenho um formulário que estou validando com o plugin jquery.validate.js. e ta funcionando do jeito que quero quando o usuario usa o tabe ou clica em outro campo, mas se ele submete o formulario tá enviando sem validar.

 

alguem já teve este problema?

 

segue o código.

 

Formulario

 
<h3>Faça seu cadastro gratuito</h3>
        <form method="post" id="cadastro" name=form1 >
          <table width="auto" border="0">
            <tr>
                <td>E-mail *:</td>
                <td colspan="3"><input type="text" size="50" name="email" id="email"/></td>
              </tr>
              <tr>
                <td>Nome completo *:</td>
                <td colspan="3"><input type="text" size="50" name="nome" id="nome" /></td>
              </tr>
              <tr>
                <td> CPF *:</td>
                <td colspan="3"><input type="text" size="14" name="cpf" id="cpf" maxlength="14" /></td>
              </tr>
              
              <tr>
                <td>Data nascimento *:</td>
                <td colspan="3"><input type="text" name="data" id="data" /></td>
              </tr>
              <tr>
              
              <td>Cidade *: </td>
                <td colspan="3"><input type="text" name="cidade" id="cidade" /></td>
              </tr>
              
              <tr>
                <td>Estado *: </td>
                <td colspan="3">
                <select name="estado" id="estado">
                 <option>Escolha um...</option>
 <option>Acre - AC</option>
 <option>Alagoas - AL</option>
 <option>Amapá - AP</option>
 <option>Amazonas - AM</option>
 <option>Bahia  - BA</option>
 <option>Ceará - CE</option>
 <option>Distrito Federal  - DF</option>
 <option>Espírito Santo - ES</option>
 <option>Goiás - GO</option>
 <option>Maranhão - MA</option>
 <option>Mato Grosso - MT</option>
 <option>Mato Grosso do Sul - MS</option>
 <option>Minas Gerais - MG</option>
 <option>Pará - PA</option>
 <option>Paraíba - PB</option>
 <option>Paraná - PR</option>
 <option>Pernambuco - PE</option>
 <option>Piauí - PI</option>
 <option>Rio de Janeiro - RJ</option>
 <option>Rio Grande do Norte - RN</option>
 <option>Rio Grande do Sul - RS</option>
 <option>Rondônia - RO</option>
 <option>Roraima - RR</option>
 <option>Santa Catarina - SC</option>
 <option>São Paulo - SP</option>
 <option>Sergipe - SE</option>
 <option>Tocantins - TO</option>
              </select>
              </tr>
              <tr>
                <td>País *: </td>
                <td colspan="3"><input type="text" name="pais" id="pais" value="Brasil" /></td>
              </tr>
              <tr>
                <td>Empresa *:</td>
                <td colspan="3"><input type="text" size="50" name="empresa" id="empresa" /></td>
              </tr>
              <tr>
                <td>CEP *:</td>
                <td colspan="3"><input type="text" name="cep" id="cep" /></td>
              </tr>
              <tr>
                <td>Bairro:</td>
                <td colspan="3"><input type="text" name="bairro" id="bairro" /></td>
              </tr>
              <tr>
                <td>Endereço *:</td>
                <td><input type="text"  size="50" name="end" id="end" /></td>
                <td>Número *:</td>
                <td><input type="text" name="num" id="num" size="10" /></td>
              </tr>
              <tr>
                <td>Telefone residencial *:</td>
                <td colspan="3"><input type="text" name="tel_res" id="tel_res" /></td>
              </tr>
              <tr>
                <td>Telefone celular:</td>
                <td colspan="3"><input type="text" name="tel_cel" id="tel_cel" /></td>
              </tr>
              <tr>
                <td>Senha *:</td>
                <td colspan="3"><input type="password" name="senha" id="senha" size="10" /></td>
              </tr>
              <tr>
                <td>Confirme a senha *:</td>
                <td colspan="3"><input type="password" name="conf_senha" id="conf_senha" size="10" /></td>
              </tr>
              <tr>
              <td>termos do contrato</td>
                <td colspan="3"><div id="contrato">Modelo de Contrato de Prestação de Serviços
 
CLÁUSULA PRIMEIRA  do objeto   o presente instrumento objetiva a confecção de duas estantes em madeira de lei, compostas de seis prateleiras, cada, sobre uma base de armário duplo, com duas portas cada,
                    <p>CLÁUSULA SEGUNDA  do valor   o valor total será de R$ 3.000,00 (três mil  reais) a serem pagos pelo CONTRATANTE em duas parcelas de R$ 1.500,00 (um mil e  quinhentos reais), sendo a primeira entregue no ato da assinatura do contrato e  a segunda na entrega  das estantes.<br />
                      CLÁUSULA TERCEIRA  dos prazos  o CONTRATADO se  compromete de entregar os objetos do presente contrato ao contratante, em sua  residência, no prazo de 180 dias, <strong>a contar da data de assinatura do presente  instrumento</strong>. <br />
                      CLÁUSULA QUARTA  das obrigações do CONTRATADO   o CONTRATADO terá um prazo de 10 dias, <strong>a contar da assinatura deste termo</strong> para  apresentar ao contratante as amostra de madeiras para escolha, devidamente  tratadas e preparadas para uso, sem imperfeições, deformações ou problemas como  cupins, brocas, traças e outras pragas que comprometam a qualidade do objeto,  com garantia de 12 meses, a contar da entrega do serviço.<br />
                  CLÁUSULA QUINTA  das obrigações  do CONTRATANTE - o contratante se compromete em visitar a oficina do  contratado, no prazo de 10 dias a contar da assinatura do presente termo, a fim  de aprovar a madeira escolhida e autorizar o início dos trabalhos.</p>
                    <p>CLÁUSULA SEXTA  da recisão  contratual - o presente termo poderá ser rescindido por qualquer uma das partes  por descumprimento de uma das cláusulas, mediante aviso prévio de 30 (trinta)  dias, com a idenização da parte prejudicada no valor total do contrato ou por  meio de acordo ente as duas partes.</p>
                    <p>CLÁUSULA SÉTIMA  dos casos  omissos -  os casos omissos neste  contrato serão acordados entre as partes, via aditivo ao presente termo.</p>
                    <p>CLÁUSULA OITAVA  da vigência  o  presente contrato é de 180 dias, podendo ser prorrogado em até um terço desse  prazo, a critério de ambas as partes.</p>
                    <p>CLÁUSULA NONA  fica eleito o  foro da cidade de Manaus para o julgamento de quaisquer problemas decorrentes  do descumprimento do presente termo.</p>
                    <p>E por estarem de acordo, passam a  assinar o presente contrato de prestação de serviços, em cinco vias de igual  teor e para um só efeito, na presença das testemunhas abaixo.</p>
                </div></td>
            </tr>
            <tr>
             <td>Aceito o termos do contrato *:</td>
                <td colspan="3"><input type="checkbox" name="msg" id="aceite" value="aceite" /></td>
              </tr>
              <tr>
                <td> </td>
                <td colspan="3"><input type="submit" value="Cadastrar" class="submit" /></td>
              </tr>
            </table>
        </form>

Script.

	var validador = $("#cadastro").validate({
	    // Define as regras
	    rules:{
	        nome:{
	            // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
	            required: true, minlength: 2
	        },
	        email:{
	            // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
	            required: true, email: true
	        },
	        cpf:{
	            // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
	            required: true, minlength: 9
	        },
	        cidade:{
	        	required: true, minlength: 2
	        },
	        data:{
	        	required: true, minlength: 2
	        },
	        estado:{
	        	required: true
	        },
	        empresa:{
	        	required: true, minlength: 2
	        },
	        cep:{
	        	required: true
	        },
	        tel_res:{
	        	required: true
	        },
	        senha:{
	        	required: true, minlength: 2
	        },
	        contrato:{
	        	required: true
	        }
	    },
	    // Define as mensagens de erro para cada regra
	    messages:{
	        nome:{
	            required: "Digite o seu nome",
	            minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
	        },
	        email:{
	            required: "Digite o seu e-mail para contato",
	            email: "Digite um e-mail válido"
	        },
	        cpf:{
	            required: "Digite o seu CPF",
	        }
	    }
	});

obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

aperte Ctrl+Shift+J no Firefox, e veja oq aparece no console de erros.

 

leia:

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bruno muito obrigado pela resposta, fiz o indicado e o erro foi que val is null, olhei no link que vc mandou e achei que pode ser por que a propriedade não foi carregada pelo navegador ainda, porém como estou usando jquery, imagino que ele deveria esperar a pagina carregar para depois disparar os comandos certo?

 

e tem um detalhe o erro só aparece após submeter o formulario, antes não aparece até porque funciona usando a tecla tabe.

Compartilhar este post


Link para o post
Compartilhar em outros sites

o erro foi que val is null

hum.. mas hein?!

 

tem como postar o erro que apareceu aqui na integra ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

legal, o erro foi dentro do validate, então pode ser problema no seu html.

 

aqui está sobrando uma virgula:

	        cpf:{
	            required: "Digite o seu CPF"
	        }

e também o

<div id="contrato">M
q vc disparou aqui:
	        contrato:{
	        	required: true
	        }
não faz sentido.

 

div não tem value, por isso o erro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

o window.onload espera tudo carregar, images, css, js..

 

o document.ready espera só o html.

 

O seu erro é isso aqui:

<div id="contrato">M
q você disparou aqui:
	        contrato:{
	        	required: true
	        }
não faz sentido.

 

div não tem value, por isso o erro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

ok, vc retirou e ai ?

 

oq está aparecendo agora no console de erros ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

então pode ser 2 coisas, ou é cache, e o teu navegador ainda não viu q vc tirou.

 

ou tem mais elementos com esse problema. Verifique.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bruno muito obrigado pela sua ajuda, fui refazendo item por item e descobri que o erro tava no html mesmo como vc sugerio,

 

o select e options estava imcompleto muito obrigado novamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.