Validar mais de um Form com uma mesma função JS

[wertycs 0]

Prezados seguinte:

 

Tenho um loop (php) na index.php que traz diversas postagens. Neste mesmo loop, existe um form para cada umas dessas postagens:

 

Código do form:

<form id="formulario" action="javascript:func()" method="post">
Nome: <input name="nome" type="text" id="nome" /> <br />
Email: <input name="email" type="text" id="email" /> <br />
Mensagem:<textarea name="mensagem" type="text" id="mensagem" /></textarea>  <br />
<input type="submit" value="Enviar" class="btn3" />
</form>

Nesta index.php chamo o JS que faz a validação através do:

<script type="text/javascript" src="validar-form.js'?>"></script>

Código deste validar-form.js:

$(function($) {
// Quando o formulário for enviado, essa função é chamada
$("#formulario").submit(function() {
	// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
	var nome = $("#nome").val();
	var email = $("#email").val();
	var mensagem = $("#mensagem").val();
	// Exibe mensagem de carregamento
	$("#status").html("<img src='loader.gif' alt='Enviando' />");
	// Requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
	$.post('envia.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
		// Quando terminada a requisição
		// Exibe a div status
		$("#status").slideDown();
		// Se a resposta é um erro
		if (resposta != false) {
		       // Exibe o erro na div
			$("#status").html(resposta);
		} 
		// Se resposta for false, ou seja, não ocorreu nenhum erro
		else {
			// Exibe mensagem de sucesso
			$("#status").html("Mensagem enviada com sucesso!");
			// Coloca a mensagem no div de mensagens
			$("#mensagens").prepend("<strong>"+ nome +"</strong> disse: <em>" + mensagem + "</em><br />");
			      // Limpando todos os campos
				$("#nome").val("");
				$("#email").val("");
				$("#mensagem").val("");
			}
		});
	});
});

O meu problema é que, a validação funciona apenas para a 1ª postagem devido o ID possuir o mesmo nome em todos os formulários, ou seja, ID do form = (formulario), ID no JS = (#formulario).

 

Existe alguma forma de resolver isso para todos os form's funcionarem?

 

 

 

 

 

 

 

[Rafael R Silva 27]

Opa fala wertycs beleza?

 

Já tentou utilizar classe ao invés de id?

 

Nos seus formulários adicione uma classe

<form id="formulario1" action="javascript:func()" method="post" class='Forms'>

Depois altere seu o js para seguinte forma

$(function($) {

// Utilize a classe para o evento .submit;
$(".Forms").submit(function() {

Agora você precisa redefinir suas variaveis;
Utilize $(this).find('#nome') por exemplo, assim ele vai buscar dentro do form o id #nome;

});

[wertycs 0]

Muito obrigado Rafael, mas ainda não deu. Quando preencho o 2º formulario ele ainda "entende" apenas o 1º, ou seja, se preencho o campo nome do 2º form, ele ainda informa para inserir o nome, pois está considerando apenas este 1º que está vazio.

 

Uma observação é que no trecho do JS:

$.post('envia.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {

O arquivo envia.php é responsável por enviar o form além de validar os campos com IF, parte do código abaixo:

// Verifica se o nome foi preenchido
if (empty($nome)) {
	echo "Escreva seu nome";
} 
// Verifica se o email é válido
elseif (substr_count($email, "@") == 0 || substr_count($email, ".") == 0) {
	echo "Digite um email válido";
} 
// Verifica se a mensagem foi digitada
elseif (empty($mensagem)) {
	echo "Escreva uma mensagem";
} 
// Verifica se a mensagem nao ultrapassa o limite de caracteres
elseif (strlen($mensagem) > 140) {
	echo "A mensagem deve ter no máximo 140 caracteres";
} 
// Se não houver nenhum erro
else { ...

[Rafael R Silva 27]

Acho que você não entendeu o que eu falei.

 

Segue um exemplo:

 

http://jsfiddle.net/rrsilva88/5Lf786vp/

 

Não dei a solução apenas o caminho, provavelmente você não atribuiu as variáveis corretamente, pois está usando id;

 

No exemplo que criei basta você utilizar a função serialize();

 

E enviar o data do exemplo para sua chamada ajax

$.post('envia.php',data,function(resposta){

 // trabalhar a resposta aqui //
});

[wertycs 0]

Olá Rafael,

Antes do seu retorno acima, acabei fazendo uma "melhoria" no meu código onde, ao invés de criar um form para cada post sempre que a página for carregada, fiz um JS para gerar apenas quando o botão for acionado, assim evito, além de criar vários, muita das vezes sem necessidade, processamento e "peso" da página.

 

Agora, me deparei com uma nova dificuldade:

 

1º - Preciso passar o código do post (ID) para o modal. O <label for...> é o que aciona o modal e o link <a> é onde quero passar o ID do post. Este está dentro de um loop.

<label for="modal_denunciar">
<a onclick='carregarPost(<?php echo $value->lnkCod ?>)'  title="<?php echo $value->lnkDesc ?>"><?php echo $value->lnkCod ?></a> 
</label>

Uma ideia seria criar uma função JS para passá-lo (talvez) via onclick.

 

2º - Aqui que entra a dificuldade,... o modal abaixo está fora do loop,... não estou conseguindo receber esse ID de maneira alguma.

<!-- Inicio Modal -->
<input type="checkbox" id="modal_denunciar"/>
<div class="modal">
<div class="modal-content">
<div class="modal_img">
<?php		
if ((file_exists('upload/link/'. $value->lnkImage)) && (!empty ($value->lnkImage)))	{ ?>
<img src="<?php echo base_url() .'upload/post/'. $value->lnkImage ?>" alt="<?php echo $value->lnkTitulo ?>"/>
<?php }else{ ?>
<img src="<?php echo base_url() .'images/no-img.gif' ?>" alt="<?php echo $value->lnkTitulo ?>" /> <?php } ?>						
</div>
<div class="modal_padding">
<h4><?php echo $value->lnkTitulo ?></h4>
<p><?php echo $value->lnkDesc ?></p></div>
<hr>
<div style="text-align:center;"><b> Encontrou algum erro ou problema com este link? <br>Por favor, informe-nos para que possamos tratar.</b><br><br></div>
<div id="status"></div>
<div id="escrever">
<script>
window.onload = criarform();
</script>
</div>
</div>
<label class="modal-close" for="modal_denunciar"></label>
</div>
<!-- Fim Modal -->

Como poderia ser essa função JS (carregaPost) para receber esse ID e fazer o modal funcionar?