Validar com JS antes de enviar para PHP

[wesleymonaro]

Fala galera.

To com um problema.

To montando um site de cadastro de curriculo. A página de cadastro dos dados pessoais tem um botão submit que tem um evento onclick chamando uma função de validação JS em um arquivo externo. Porém, mesmo que a validação ocorra, e o usuário digite os dados errados, o JS não volta para o HTML, ele está indo diretamente para o PHP.

Ou seja, mesmo que eu digite um campo em branco, ao clicar no botão, ele exibe a mensagem do JS de que o campo está errado, mas vai para o PHP direto, sem voltar para o HTML.

CÓDIGO JS

function valida_formulario(){

		//valida campo em braco
		if(document.dados_pessoais.nome.value==""){
			alert("Por favor, preencha todos os campos");
			document.dados_pessoais.nome.focus();
			location.href="dados_pessoais.html";

		}


		//valida a existencia dos caracteres @ e .
		if(document.dados_pessoais.email.value=="" ||
			document.dados_pessoais.email.value.indexOf('@')==-1 ||
			document.dados_pessoais.email.value.indexOf('.')==-1){
				alert("Por favor, digite um e-mail válido");
				document.dados_pessoais.email.focus();
				location.href="dados_pessoais.html";
				return false;
		}

		//valida a quantidade de caracteres no campo senha
		if(document.dados_pessoais.senha.value.lenght > 8){
			alert("A senha deve ter no máximo 8 caracteres");
			document.dados_pessoais.senha.focus();
			location.href="dados_pessoais.html";
			return false;
		}

		//verifica se as duas senhas são iguais
		if(document.dados_pessoais.txtSenha.value != document.dados_pessoais.txtRepsenha.value){
			alert("As senhas devem ser iguais. Digite novamente");
			document.dados_pessoais.senha.focus();
			location.href="dados_pessoais.html";
			return false;
		}	

}

CÓDIGO DO FORM HTML

<form name="dados_pessoais"  action="dados_pessoais.php" method="post">

			<legend>Dados Pessoais</legend>
			<p>
				<label for="nome">
					Primeiro Nome:
				</label>
				<input type="text" class="entrada_de_dados" id="nome" name="txtNome">
			</p>
			<p>
				<label for="sobrenome">
					Sobrenome:
				</label>
				<input type="text" class="entrada_de_dados" id="sobrenome" name="txtSobrenome">
			</p>
			<p>
				<label for="data_nascimento">
					Data de Nascimento:
				</label>
					<input name="data_nascimento" id="data_nascimento" type="date">
			</p>
			<p>
				<label for="rg">
					RG:
				</label>
				<input type="text" class="rg" id="rg" name="txtRg">
			</p>
			<p>
				<label for="cpf">
					CPF:
				</label>
				<input type="text" class="cpf" id="cpf" name="txtCpf">
			</p>
			<p>
				<label for="estado_civil">
				Estado Civil
				</label>		
					<select name="estado_civil" onChange="combo(this, 'theinput')">
						  <option>Solteiro(a)</option>
						  <option>Casado(a)</option>
						  <option>Divorciado(a)</option>
						  <option>Viúvo(a)</option>
					</select>
			</p>
			<p>
				<label for="email">
					Email:
				</label>
				<input type="text" class="email" id="email" name="txtEmail">
			</p>

			<p>
				<label for="login">
					Login:
				</label>
				<input type="text"  id="login" name="txtLogin">
			</p>
			<p>
				<label for="senha">
					Senha:
				</label>
				<input type="password" class="senha" id="senha" name="txtSenha" maxlength=8>
			</p>
			<p>
				<label for="rep_senha">
					Repita a Senha:
				</label>
				<input type="password" class="rep_senha" id="rep_senha" name="txtRepsenha" maxlength=8p>
			</p>

		<input type="submit" value="Cadastrar" name="acao" onclick="valida_formulario();">
		<input type="reset" id="botao">
		</form>

Alguém tem ideia de como posso resolver?

[andersondanilo]

você pode fazer a validação no onsubmit da tag form:

onsubmit="return valida_formulario();"

parece que você está mandando a validação ir direto para o php:

if(document.dados_pessoais.nome.value==""){
			alert("Por favor, preencha todos os campos");
			document.dados_pessoais.nome.focus();
			[COLOR="Red"]location.href="dados_pessoais.html";[/COLOR]

		}