Ir para conteúdo

POWERED BY:

Arquivado

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

goncalves2345

[Resolvido] Jquery

Por , em Javascript

Recommended Posts

goncalves2345    0

goncalves2345
Postado

E aí galera!!Tudo bem?

 

A questão e a seguinte eu to começando aprender jquery, logo peguei uns exemplos da internet pra rodar, primeiro eu fiz uma validação de um formulario, depois coloquei umas mascaras em alguns campos e pra fechar conseguir cadastrar no banco. Só que eu juntei tudo e não conseguir encaixa tudo direitinho estar cadastrando no banco, mais a validação ficou prejudicada, logo eu queria que vocês me desse uma ajuda.

 

segue o códigos:códigos

 

Desde de já eu agradeço pela atenção!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

remova uma dessas linhas:

<script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>

deixe apenas uma delas.

 

não tem sentido nenhum você importar o mesmo plugin 2 vezes.

remova o atributo language. Não existe nenhum motivo para usá-lo hoje em dia.

 

no lugar de fazer:

$("#formularioCadastro").submit(function() {

veja sobre o metodo submitHandler do proprio validate

Compartilhar este post

Link para o post
Compartilhar em outros sites

goncalves2345    0

goncalves2345
Postado

Valew William Bruno pelas dicas então eu procurei sobre o submitHandler e achei bastante coisa e mudei o meu arquivo, mais agora não estar rodando.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN"> 
<html> 
<head> 
<title>Cadastro de Usuário</title> 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> 

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>

<style type="text/css">
<!--

#formularioCadastro label.error {
 color: #FFFFFF;
 font-weight: bold;
 background-color: #FF0000;
 margin-left: 5px;
 width: 120px;
 text-align: center;
}

#status {
padding: 5px 0 15px 0;
display: none;
color: #900;
font-weight: bold;
}
#formularioCadastro input[type=text].error{ 
       background: #f8dbdb; 
       border-color: #e77776; 
} 

#formularioCadastro input[type=password].error{ 
       background: #f8dbdb; 
       border-color: #e77776; 
} 

-->
</style>

<script type="text/javascript">

$(document).ready( function() {
               $("#formularioCadastro").validate({
                   // Define as regras
                   rules:{
                       nome:{
                           // campoNome será obrigatorio (required) e terá tamanho minimo (minLength)
                           required: true, minlength: 2
                       },

		telefone:{
                           required: true, minlength: 10
                       }

                   },
                   // Define as mensagens de erro para cada regra
                   messages:{
                       nome:{
                           required: "Digite o seu nome",
                           minlength: "O seu nome deve conter, no mínimo, 2 caracteres"
                       },
		telefone:{
                           required: "Digite o seu telefone",
                           minlength: "O seu telefone deve conter, no mínimo, 10 caracteres"
                       }
                   },


submitHandler: function(form) { 

	// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação 
	var nome=$("#nome").val();
	var telefone=$("#telefone").val();


	// Exibe mensagem de carregamento 
	$("#status").html("<img src='loader.gif' alt='Enviando' />"); 

	// Fazemos a 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, telefone: telefone }, 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!"); 


		$("#nome").val(""); 
		$
		$("#telefone").val(""); 	

	}

}
}); 
}); 


</script>



</head> 
<body> 

<br>
<br>
<br>
<form id="formularioCadastro" method="post" action="" class="form">
        <label>Nome: </label>
        <input name="nome" type="text" id="nome" value="" /><br>

<label>Telefone: </label>
       <input name="telefone" type="text" id="telefone" value="" /><br>		

<input name="cadastrar" width="20" type="submit" class="submit" value="Cadastrar" /> 

</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem um erro de sintaxe aqui:

                        $("#nome").val(""); 
                       $
                       $("#telefone").val("");

sobrando aquele $ ali no meio.

 

aperte Ctrl+Shif+J no Firefox, veja os erros que o depurador lhe apontar, e corrija.

Compartilhar este post

Link para o post
Compartilhar em outros sites

goncalves2345    0

goncalves2345
Postado

Conseguir rodar estava falatando fechar $.post('envia.php', {nome: nome, telefone: telefone }, function(resposta) { });

Tava assim: 

//  

               // Fazemos a 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, telefone: telefone }, 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!");  


                       $("#nome").val("");  
                       $ 
                       $("#telefone").val("");          

               } 

} 
});  
});

 

 

Tudo certo ficou assim:

 

// Fazemos a 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, telefone: telefone }, 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("Dados cadastrados com sucesso!"); 


				$("#nome").val(""); 
				$("#telefone").val(""); 


		}
});

}
}); 
});

 

Agora outra dúvida cruel que eu não to conseguindo fazer que estar dando erro e colocar a validação do campo telefone com mascara:

$("#telefone").mask("(99)-9999-9999")

 

Já fiz de várias formas, mais não funciona no formulário.

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