Jump to content
Fórum Script Brasil
  • 0

Validar form em página gerada via javascript

Keka Manu

Asked by Keka Manu,

 Share

Question

Keka Manu

Keka Manu

Posted
Posted

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 to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
wootzor

wootzor

Posted
Posted

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 to comment
Share on other sites
  • 0
Keka Manu

Keka Manu

Posted
  • Author
Posted

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.7k
×
×
  • Create New...