Ir para conteúdo

POWERED BY:

Arquivado

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

Flávio Milan

[Resolvido] Jquery - Validação de Email e Envio

Por , em Javascript

Recommended Posts

Flávio Milan    0

Flávio Milan
Postado

Boa tarde amigos,

 

estou desenvolvendo um site e no mesmo tenho um formulario de contato

com o jquery eu consigo fazer a validação dos campos e o envio...

 

porem os 2 codigos .js juntos ele verifica que o campo esta errado

mas confirma o envio...

 

o site é www.apaebatatais.org.br/leilao/

 

ir no menu Convites > Reservar

 

Como posso fazer para solucionar o problema??

 

Segue os codigos.

 

 

formulario.php

<html>
<head>
<script type="text/javascript" language="javascript" src="js/valida_form.js"></script>
<script type="text/javascript" language="javascript" src="js/formulario_envio.js"></script>
</head>
<body>
<div id="formulario">
	<div id="formularioEmail">
		<form id="formularioEnvio" method="post" >
			<table>

			<tr>
				<td><label for="nome">Nome:</label></td>
			</tr>
			<tr>
				<td><input type="text" name="nome" id="nome" /></td>
			</tr>

			<tr>
				<td><label for="endereco">Endereço:</label></td>
				<td><label for="numero">Numero:</label></td>
			</tr>
			<tr>
				<td><input type="text" name="endereco" id="endereco" /></td>
				<td><input type="text" name="numero" id="numero" style="width:90px;"/></td>
			</tr>

			<tr>
				<td><label for="telefone">Telefone:</label></td>
			</tr>
			<tr>
				<td><input type="text" name="telefone" id="telefone" /></td>
			</tr>

			<tr>
				<td><label for="email">E-mail:</label></td>
			</tr>
			<tr>
				<td><input type="text" name="email" id="email" /></td>
			</tr>

			<tr>
				<td><label for="qtdconvites">Quantidade de Convites:</label></td>
			</tr>
			<tr>
				<td><select value="qtdconvites" name="qtdconvites" id="qtdconvites">
						<option value="1 convite">1 Convite</option>
						<option value="2 convites">2 Convites</option>
						<option value="3 convites">3 Convites</option>
						<option value="4 convites">4 Convites</option>
						<option value="5 convites">5 Convites</option>
						<option value="6 convites">6 Convites</option>
						<option value="7 convites">7 Convites</option>
						<option value="8 convites">8 Convites</option>
						<option value="9 convites">9 Convites</option>
						<value="10 convites">10 Convites</option>
					</select></td>
			</tr>

			<tr>
				<div align="center"><td><input type="submit" value="Reservar Convite" name="cadastrarEmail" id="cadastrarEmail"/></td></div>
			</tr>
		</table>
		</form>
		</div>

	<div id="retorno" style="font-family:Calibri, 'Trebuchet MS', Verdana; font-size: 15px; border: 1px solid #3DBF0D; background: #91DE76; text-align: center; display:none; font-weight: bold;  padding: 10px 10px 10px 10px;"></div>
</div> 
</body>
</html>

 

validacao.js 

$(document).ready( function() {
               $("#formularioEnvio").validate({

               rules:{
               nome:{
               required: true, minlength: 6
           },
               endereco:{
               required: true, minlength: 6
           },
               numero:{
               required: true, minlength: 1
           },
               email:{
               required: true, email: true
           },
               telefone:{
               required: true, minlength: 8
           }
           },
               messages:{
               nome:{
               required: "* Digite o seu nome",
               minLength: "* O seu nome deve conter, no mínimo, 6 caracteres"
           },
               endereco:{
               required: "* Digite o seu endereço para entrega",
               minLength: "* Digite um endereço válido"
           },
           	numero:{
               required: "* Digite um numero válido",
               minLength: "* Digite um numero válido"
           },
               email:{
               required: "* Digite o seu email",
               minLength: "* Digite um endereço válido"
           },
               telefone:{
               required: "* Digite seu telefone",
               minLength: "* A sua mensagem deve conter, no mínimo, 8 numeros"
           }
           }
           });
           });

 

email.js

$(function(){ 
$("#cadastrarEmail").click(function(){
	$("#formularioEmail").hide("slow");

	var nome = $("#nome").val();
	var email = $("#email").val();
	var endereco = $("#endereco").val();
	var numero = $("#numero").val();
	var telefone = $("#telefone").val();
	var qtdconvites = $("#qtdconvites").val();

	$.post("conteudo/formulario/enviar_reservas.php", { nome:nome, endereco:endereco, numero:numero, telefone:telefone, email:email, qtdconvites:qtdconvites }, function(get_retorno) {
	$("#carregando_form").hide("slow"); 
	$("#retorno").show("slow").text(get_retorno); 
}); 
 });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Esse meu artigo resolve teu problema:

 

 

http://www.wbruno.com.br/blog/2011/03/21/validar-enviar-formulario-ajax-usando-jquery-validate/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Flávio Milan    0

Flávio Milan
Postado

OOOO Grande...

 

Resolveu meu problema...

 

Estou estudando ainda, seu blog ja me deu um tok ;)

Não vou ficar acomodado a pegar codigos jquery sem conhecer javascript...

 

Mas muito obrigado mesmo..

 

Ficou somente um arquivo e ficou assim...

 

$(document).ready( function() {
               $("#formularioEnvio").validate({

               rules:{
               nome:{
               required: true, minlength: 6
           },
               endereco:{
               required: true, minlength: 6
           },
               numero:{
               required: true, minlength: 1
           },
               email:{
               required: true, email: true
           },
               telefone:{
               required: true, minlength: 8
           }
           },
               messages:{
               nome:{
               required: "* Digite o seu nome",
               minLength: "* O seu nome deve conter, no mínimo, 6 caracteres"
           },
               endereco:{
               required: "* Digite o seu endereço para entrega",
               minLength: "* Digite um endereço válido"
           },
           	numero:{
               required: "* Digite um numero válido",
               minLength: "* Digite um numero válido"
           },
               email:{
               required: "* Digite o seu email",
               minLength: "* Digite um endereço válido"
           },
               telefone:{
               required: "* Digite seu telefone",
               minLength: "* A sua mensagem deve conter, no mínimo, 8 numeros"
           }
           },
            submitHandler: function( form ){   
            var dados = $( form ).serialize();

            $(function(){ 
			$("#formularioEmail").hide("slow");

			var nome = $("#nome").val();
			var email = $("#email").val();
			var endereco = $("#endereco").val();
			var numero = $("#numero").val();
			var telefone = $("#telefone").val();
			var qtdconvites = $("#qtdconvites").val();

			$.post("conteudo/formulario/enviar_reservas.php", { nome:nome, endereco:endereco, numero:numero, telefone:telefone, email:email, qtdconvites:qtdconvites }, function(get_retorno) {
			$("#carregando_form").hide("slow"); 
			$("#retorno").show("slow").text(get_retorno); 
		}); 
		});
		}
           });
           });

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

bacana.

 

Como dica, apenas otimize isso:

 

             var dados = $( form ).serialize();

            $(function(){ 
                               $("#formularioEmail").hide("slow");

                               var nome = $("#nome").val();
                               var email = $("#email").val();
                               var endereco = $("#endereco").val();
                               var numero = $("#numero").val();
                               var telefone = $("#telefone").val();
                               var qtdconvites = $("#qtdconvites").val();

                               $.post("conteudo/formulario/enviar_reservas.php", { nome:nome, endereco:endereco, numero:numero, telefone:telefone, email:email, qtdconvites:qtdconvites }, function(get_retorno) {

para:

 

             var dados = $( form ).serialize();

                               $("#formularioEmail").hide("slow");

                               $.post("conteudo/formulario/enviar_reservas.php", { dados }, function(get_retorno) {

corrigindo a sintaxe, já que $(function) não é necessário nesse fragmento de script.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito