Função não barra o envio do form
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'](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>Discussão (1)
Carregando comentários...