html Login não quer validar meus campos, já entra direto!

juliocesarpt · Dezembro 8, 2017

O que eu queria que acontecesse, que o formulário validasse meus campos, ai em seguida quando eu clicar em entrar, me redirecionar para o site desejado,

mas não é isso que acontecesse, quando clico em entrar já me redirecionar sem validar os campos.

Já tentei com onSubmit, agora com onClick, sem os 2 e nada, estou fazendo algo errado e alguém puder me ajudar, ficaria muito grato!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ChipStore - Principal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="shortcut icon" href="./img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function verificaPessoa() {
if (document.getElementById('tipoPessoa').value == 'PF') {
document.getElementById('pessoaFisica').style.display = 'block';
document.getElementById('pessoaJuridica').style.display = 'none';
} else {
document.getElementById('pessoaFisica').style.display = 'none';
document.getElementById('pessoaJuridica').style.display = 'block';
}
}

function Enviar(opc) {
if(opc == 1) {
document.form.action = "https://oglobo.globo.com/";
document.form.target = "";
document.form.submit();
} if(opc == 0) {
document.form.action = "https://extra.globo.com/";
document.form.target = "";
document.form.submit();
}
}
</script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Alternar Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="col-sm-3">
<button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#login" id="nav-btn-login">LOGIN</button>
<i class="glyphicon glyphicon-shopping"></i>
</div>
</div>
</div>
</nav>

<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" id="modalLogin">
<div class="modal-header">
<h1 class="text-center"><i class="glyphicon glyphicon-user"></i> Login</h1>
</div>
<div class="modal-body">
<form action="" method="POST" name="form" target="" id="form" onSubmit="">
   Login:
       <select id="tipoPessoa" name="tipoPessoa" onchange="verificaPessoa();">
<option value="PF">Cliente</option>
<option value="PJ">Administrador</option>
</select>
<br>
<br>
<div id="pessoaFisica" style="display:block;">
       <div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" name="logincli" id="loginCli" placeholder="Digite seu Email" required autofocus />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" name="cp1" id="cp1" placeholder="Digite sua senha" required autofocus />
</div>
                   <button name="visualizar" class="btn btn-form btn-block" type="submit" id="visualizar" value="Visualizar" onClick="Enviar(1);">Entrar</button>
</div>
<div id="pessoaJuridica" style="display:none;">
        <div class="form-group">
<label for="exampleInputEmail2">Cpf</label>
<input type="text" class="form-control" name="loginpro" id="loginPro" placeholder="Digite seu Cpf" required autofocus />
</div>
<div class="form-group">
<label for="exampleInputPassword2">Senha</label>
<input type="password" class="form-control" name="cp2" id="cp2" placeholder="Digite sua senha" required autofocus />
</div>
                   <button name="enviar" class="btn btn-form btn-block" type="submit" id="enviar" value="Enviar" onClick="Enviar(0);">Entrar</button>
</div>

</form>
</div>
<div class="modal-footer" style="text-align: center;">
<p>Não é cadastrado? <a class="login-link" href="#">Clique aqui!</a></p>
</div>
</div>
</div>
</div>
</body>