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

Validar form em página gerada via javascript

Keka Manu

Perguntado por Keka Manu,

 Share

Pergunta

Keka Manu

Keka Manu

Postado
Postado

Olá pessoal, tenho um página index.php que ao clicar em um link é aberta a pagina contato.php em javascript, a qual possui um form de contato. Tenho a página jquery.validate.js utilizada para validação de forms, e também o arquivo form.js, que contem a função para validação do formulario, e também utilizo o arquivo jquery-2.1.1.js. Existem outras páginas js que fazem a abertura da página contato.php, porém creio que não será necessário colocá-las aqui, caso seja apresentarei.

A questão é: Quando abro a página contato.php via javascript o form não valida os campos, porém se clico duas vezes no botão enviar do formulario ele valida, porém depois não executa mais nada, fica estático, não faz mais nada, alguma coisa está travando o formulario, já fiz varios testes porem não obtive sucesso, creio que algo no meu script está escrito errado, creio que alguém possa iluminar minha mente, com alguma ideia, olhando o código. Socorro :o

Veja o codigo das pagina abaixo:

Página index.php

<html>
<body>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<main class="cd-main">
<ul class="cd-gallery">
<li class="cd-item">
<a href="colecao.php">
<div>
<h2>Contato</h2>
</div>
</a>
</li>
</ul>
</main>
</body>
</html>
Pagina contato.php
<!doctype html>
<html>
<body>
<form name="contato" id="contato" method="post" action="" >
<p style="color:#CC0000; margin:0 0 0 0px; font-size:14px"><?php echo $msg; ?></p>
<span style="float:left; margin-right:20px;">
<input name="nome" type="text" class="radius" id="nome" value="<?php echo $nome; ?>" style="width:100%;" tabindex="1">
</span>
<span style="float:left; margin-right:20px;">
<p>Telefone:
<input name="telefone" maxlength="15" type="text" class="radius" id="telefone" value="<?php echo $telefone; ?>" style="width:100%;" tabindex="1">
</span>
<div class="clear"></div>
<span>
<p>E-mail: <b>*</b></p>
<input name="email" type="text" class="radius" id="email" value="<?php echo $email; ?>" style="width:100%;" tabindex="3">
</span>
<div class="clear " ></div>
<span >
<p>Estado:</p>
<select class="estados" id="estados" name="estados" style="width:100%;" >
<option value="<?php echo $estados; ?>"></option>
</select>
</span>
<span>
<p>Cidade:</p>
<select class="cidades" name="cidades" id="cidades" style="width:100%;" >
<option value="<?php echo $cidades; ?>"></option>
</select>
</span>
<span>
<p>Assunto: <b>*</b></p>
<input name="assunto" type="text" class="radius" id="assunto" value="<?php echo $assunto; ?>" style="width:100%;" tabindex="8">
</span>
<span>
<p>Mensagem: <b>*</b></p>
<textarea name="mensagem" class="radius" id="mensagem" value="<?php echo $mensagem; ?>" style="width:100%; height:140px;" tabindex="9"></textarea>
</span>
<div class="clear"></div>
<label class="label_2" id='other_email_label' for='other_email'>E-mail</label>
<input type='text' name='other_email' id='other_email'>
<input type="submit" class="radius" style="width:50%;" id="contato" name="contato" value="Enviar" tabindex="10">
</form>
</body>
</html>
pagina forms.js
// JavaScript Document
$('body').delegate("#contato",'submit',function(e) {
e.preventDefault();
$(function() {
$(document).ready(function () {
$.getJSON('estados_cidades.json', function (data) {
var items = [];
var options = '<option value=""></option>';
$.each(data, function (key, val) {
options += '<option value="' + val.nome + '">' + val.nome + '</option>';
});
$("#estados").html(options);
$("#estados").change(function () {
var options_cidades = '';
var str = "";
$("#estados option:selected").each(function () {
str += $(this).text();
});
$.each(data, function (key, val) {
if(val.nome == str) {
$.each(val.cidades, function (key_city, val_city) {
options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#cidades").html(options_cidades);
}).change();
});
});
/* Máscaras ER */
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
return v;
}
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
id('telefone').onkeypress = function(){
mascara( this, mtel );
}
}
$("#contato").validate({
// Define as regras
rules:{
nome:{
required: true
},
email:{
email: true
},
telefone:{
required: true
},
cidades:{
required: true
},
estados:{
required: true
},
assunto:{
required: true
},
mensagem:{
required: true
}
},
messages:{
nome:{
required: "Digite seu nome"
},
email:{
email: "E-mail inválido"
},
telefone:{
required: "Digite seu telefone"
},
estados:{
required: "Selecione o Estado"
},
cidades:{
required: "Selecione a Cidade"
},
assunto:{
required: "Digite o Assunto"
},
mensagem:{
required: "Digite sua mensagem"
}
}
});
});
});

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
wootzor

wootzor

Postado
Postado

Aparentemente tens alguns erros no código.

Começando pelo princípio, a função document.ready deve ser a primeira de todas visto que o código jQuery só é executado dentro desta função. Ou seja, tens de colocar o $("body").delegate() dentro do evento $(document).ready().

De seguida, a sintaxe $(function() {}) não é mais do que um alias para a document.ready portanto não é necessária.

Finalmente, dentro da função mascara, tens de declarar as variáveis v_obj e v_fun. Para além disso, há um setTimeout a executar a cada milissegundo. Presumo que devesse ser a cada segundo, certo? Nesse caso tens de substituir o segundo parâmetro da função por 1000 (1000 ms = 1 s).

Ficam aqui essas pequenas correcções, espero ter ajudado :)

Link para o comentário
Compartilhar em outros sites
  • 0
Keka Manu

Keka Manu

Postado
  • Autor
Postado

Oi Wootzor, obrigada pela ajuda na escrita do codigo, fiz o teste aqui, e o problema permanece, ou seja, tenho que dar dois cliques no botao ainda, para que aparecça a validação, e após tudo validado com os campos preenchido bonitinho ao clicar o botão não executa via php, fica estatico o formulario, não ocorre nada.

Já mudei as propriedades do form e coloque #contato, contato.php, onSubmit="return function(e)", mas nenhuma funciona, você viu como está a inicialização do fomr?...seré que o errado é lá?

obs. peguei o fechamento da função na linha 28 e joguei para a ultima linha, pois estava executando apenas a função cidade e estados.

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...