Validar form em página gerada via javascript

Keka Manu · June 24, 2015

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>

<div>

<h2>Contato</h2>

</div>

</a>

</li>

</ul>

</main>

</body>

</html>

Pagina contato.php

<!doctype html>

<html>

<body>

<input name="nome" type="text" class="radius" id="nome" value="<?php echo $nome; ?>" style="width:100%;" tabindex="1">

</span>

<p>Telefone:

<input name="telefone" maxlength="15" type="text" class="radius" id="telefone" value="<?php echo $telefone; ?>" style="width:100%;" tabindex="1">

</span>

<span>

<input name="email" type="text" class="radius" id="email" value="<?php echo $email; ?>" style="width:100%;" tabindex="3">

</span>

<span >

<p>Estado:</p>

</select>

</span>

<span>

<p>Cidade:</p>

</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>

</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"

}

});

wootzor · June 25, 2015

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 :)

Keka Manu · June 25, 2015

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.

wootzor · June 30, 2015

Feitas essas alterações, não sei onde poderá estar o problema.

Sim, foi falha minha, tinha fechado a função fora do sítio.

Sign In

Validar form em página gerada via javascript

Question

Keka Manu

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

wootzor

Link to comment

Share on other sites

Keka Manu

Link to comment

Share on other sites

wootzor

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity