Ir para conteúdo

Arquivado

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

matheushirota

Função não barra o envio do form

Por , em Javascript

Recommended Posts

matheushirota    0

matheushirota
Postado

Olá pessoal, tudo bem?

 

Estou com um problema, criei uma validação de campos de formulário, a validação está funcionando, porém ele não barra o envio do formulário, poderiam me explicar o por que?

 

Segue os códigos:

<!DOCTYPE HTML>
<html lang="pt-BR>
<head>
	<meta charset="UTF-8">
	<title>Cloud Server - Home</title>
	<!-- FORMATAÇÃO DA PÁGINA --><link rel="stylesheet" type="text/css" href="css/upload.css">
	<!-- CSS DO LIGHTVIEW(LIGHTBOX) --><link rel="stylesheet" type="text/css" href="css/lightview/lightview.css">
	<!-- FONTE DO GOOGLE --><link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
	<!-- jQUERY CDN --><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<!-- JS DO LIGHTVIEW --><script type="text/javascript" src="js/lightview.js"></script>
	<script>
		function validaUsername(){
			var campoUsername = document.getElementById("username").value;
			if(campoUsername.length < 6 || !isNaN(campoUsername) || campoUsername.indexOf(" ") > 0 || campoUsername.match(['[-@!#$%¨&*+_´`^~;:?áÁéÉíÍóÓúÚãÃçÇ|\?,./{}"<>() ]']))
			{
				var valida = document.getElementById("valida");
				valida.style.color="red";
				document.getElementById("valida").innerHTML="NOME INVALIDO";
				return false;
			}else{
				var valida = document.getElementById("valida");
				valida.style.color="green";
				document.getElementById("valida").innerHTML="OK";
				return true;
			}
		}
		function validaEmail(){
			var campoEmail = document.getElementById("email").value;
			expressao = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2}/;
			if(!expressao.exec(campoEmail))
			{
				var valida = document.getElementById("valida_email");
				valida.style.color="red";
				document.getElementById("valida_email").innerHTML="EMAIL INVALIDO";
				return false;
			}else{
				var valida = document.getElementById("valida_email");
				valida.style.color="green";
				document.getElementById("valida_email").innerHTML="OK";
				return true;
			}
		}
	</script>
</head>
<body>
	<div class="topo">
		<h1>Cloud Server</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#cadastro" class="lightview">Cadastre-se</a></li>
				<li><a href="#login" class="lightview">Faça Login</a></li>
			</ul>
		</nav>
	</div>
	<div class="conteudo">
		<h1>Salve seus arquivos gratuitamente!</h1>
	</div>
	<div id="cadastro" style="display:none;">
		<form action="cadastra.php" method="post">
			<p>Nome de Usuario: <span id="valida"></span></p><input type="text" name="username" id="username" placeholder="Nome de Usuario" onBlur="validaUsername();" style="text-transform:lowercase;" required><span>*Minimo 6 caracteres, somente letras, sem espacos e sem caracteres especiais</span>
			<p>E-mail: <span id="valida_email"></span></p><input type="email" name="email" id="email" placeholder="E-mail" onBlur="validaEmail();" required>
			<p>Senha:</p><input type="password" name="password" id="password" placeholder="Senha" required><span id="valida">*Minimo 6 caracteres</span>
			<p>Confirmar Senha:</p><input type="password" name="confirm_password" id="confirm_password" placeholder="Confirmar Senha" required><br>
			<input type="submit" value="Cadastrar" id="btn_submit">
		</form>
	</div>
	<div id="login" style="display:none;">
		<form action="login.php" method="post">
			<p>Nome de Usuario:</p><input type="text" name="user" id="user" placeholder="Nome de Usuario" required>
			<p>Senha:</p><input type="password" name="password" id="password" placeholder="Senha" required>
			<input type="submit" value="Entrar" id="btn_submit">
		</form>
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Porque você tá usando o evento errado para validação (que impede envio).

 

Valide no evento onsubmit do form (também).

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