Validar Campos do Form

[Alex Juchem 0]

E ae galera, beleza

 

então, to com um problema aqui, sou "novato" em javascript, trabalho com PHP mas javascript não é meu forte, a empresa pediu para que eu validase 3 campos do form antes de enviar o contato, se acaso o usuario clicar no botão de enviar sem preencher nem um dos capos ira aparecer uma mensagem de erro em cada campo que é obrigatório, atualmente esta aparecendo a mensagem apenas no campo e-mail, se preencher o e-mail e os outros não, aparece no campo nome, se preencher o email e nome e outros não, aparece no campo estado, se preencher todos ele envia tranquilo, então seria basicamente isso, clicar no btn enviar e aparecer a mensagem nos campos de preenchimento obrigatório caso eles estejam vazio, vou por aqui o js para vcs verem

 

 

//CONTATO
// Quando o formulário for enviado, essa função é chamada
$("#btnEnviarCo").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 telefone = $("#telefone").val();
	var mensagem = $("#mensagem").val();


	var regmail = /^[\w!#$%&'*+\/=?^`{|}~-]+(\.[\w!#$%&'*+\/=?^`{|}~-]+)*@(([\w-]+\.)+[A-Za-z]{2,6}|\[\d{1,3}(\.\d{1,3}){3}\])$/;
    if (!regmail.test($("#email").val())) {
    	$('#erroEmail').css('display','block');
    	passa = false;
	}else if (($('#nome').val() == nomeVal) || $('#nome').val().length < 3 ){
		$('#erroNome').css('display','block');
    	passa = false;
    } else {
    	$('#erroEmail').css('display','none');
	$('#erroNome').css('display','none');


	// Exibe mensagem de carregamento
	$("#status").html("<center><img src='templates/img/enviarEmail.gif' alt='Enviando' /></center>");
	// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
	$.post('php/exec_contato.php', {nome: nome, email: email, telefone: telefone, 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 {
				// Limpando todos os campos
				$("#nome").val("");
				$("#email").val("");
				$("#telefone").val("");
				$("#mensagem").val("");
			}
	});
	}
});

 

Como vcs podem ver falta a validação do campo estado, eu não coloquei por não concegui arrumar nem os outros dois, nome e e-mail =), depois de clicado ele faz esta verrificação e envia com o ajax para uma outra pagina PHP que ira fazer o processo e enviar o e-mail.

 

 

Galera, me ajuda, só novato na empresa mas só manjo PHP, vlw e bom final de semana

[Lucas Guima 164]

Coloca a estrutura também.

[Alex Juchem 0]

ae esta o html do formulario, não sei se foi isso que você pediu

, vlw por me ajudar

<form id="btnEnviarCo" method="post" class="formulario_contato" action="javascript:func()">
   <div id="conteudo_contato">
       <div class="post">
           <div class="titulo_fundo">
           	<h1>CONTATO</h1>
           </div>

           <div id="mensagem_enviado_sucesso">
           	<font class="enviado_com_sucesso"></font>
           </div>

           <div class="entry">

           	<div id="status" style="display: none; text-align:left;" class="enviado_com_sucesso"></div>	

           	<div id="conteudo_caixas_formulario">
           		<div id="conteudo_fundo_contato">
           			<div id="nome_formulario">
           				<label for="nome" class="fonte_contato">Nome*</label>
           			</div>
           			<div id="caixa_formulario">
           				<input type="text" class="campo_form2" style="width:300px;" name="nome" id="nome" size="30"  />
           			</div>
           			<span class="erro"  id="erroNome">Preencha seu Nome</span>
           		</div>

                   <div id="conteudo_fundo_contato">
                       <div id="nome_formulario">
                           <label for="email" class="fonte_contato">Email*</label>
                       </div>
                       <div id="caixa_formulario">
                           <input type="text" class="campo_form2" name="email" style="width:300px;" id="email" size="30"/>
                       </div>
                       <span class="erro" id="erroEmail">Preencha seu E-mail</span>
                   </div>

                   <div id="conteudo_fundo_contato">
                       <div id="nome_formulario">
                           <label for="telefone" class="fonte_contato">Telefone</label>
                       </div>
                       <div id="caixa_formulario">	
                           <input type="text" class="campo_form2" name="telefone" style="width:300px;" id="telefone" size="30"/>
                       </div>
                   </div>

                   <div id="nome_formulario">
                       <label for="mensagem" class="fonte_contato">Mensagem</label><br />
                   </div>
           		<textarea name="mensagem" class="campo_form2" style="width:300px;" id="mensagem" cols="30" rows="10"></textarea>

                   <div id="enviar" style="margin-top:20px; margin-bottom:0px;">
                       <input name="Submit" value=" " alt="Enviar Mensagem" title="Enviar Mensagem" type="submit" class="btnEnviarCo">
                   </div>	
           		<div class="fonte_contato" style="width:100%; text-align:center; position:relative; clear:both;">*Campos de preenchimento obrigatório!</div>
           	</div>
           </div>
       </div>
   </div>
</form>