estou desenvolvendo um sistema de login, onde preciso retornar a mensagem de validação para o usuário em uma div na própria página de login, entretanto a mensagem de erro está aparecendo na página de validação.Estou usando Bootstrap e PHP com PDO.
Login.php:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<form id="loginform" role="form" action="validaLogin.php" method="POST">
<div class="form-group has-feedback">
<label for="login" class="control-label">Login</label>
<input type="text"
class="form-control"
id="inputLogin"
name="login"
placeholder="Insira seu login"
title="Insira seu Login"
required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<label for="inputSenha" class="control-label">Senha</label>
<input type="password"
class="form-control"
id="inputSenha"
name="senha"
placeholder="Insira sua senha"
title="Insira sua Senha"
required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors" id="login-alert"><span id="mensagem"></span></div>
</div>
<div class="form-group margin-top-pq">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary" name="btn-login" id="btn-login">
Entrar
</button>
</div>
</div>
</form>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="check.js"></script>
</body>
</html>
check.js:
O código abaixo deveria retornar uma mensagem de erro na div #mensagem
<script >$('document').ready(function(){
$("#btn-login").click(function(){
var data = $("#loginform").serialize();
$.ajax({
type : 'POST',
url : 'Login.php',
data : data,
dataType: 'json',
beforeSend: function()
{
$("#btn-login").html('Validando ...');
},
success : function(response){
if(response.codigo == "1"){
$("#btn-login").html('Entrar');
$("#login-alert").css('display', 'none')
window.location.href = "selectPersonagem.php";
}
else if(response.codigo == "0"){
$("#btn-login").html('Entrar');
$("#login-alert").css('display', 'block');
$("#mensagem").html('<strong>Erro! </strong>' + response.mensagem);
}
}
});
});
});
validaLogin.php
Nesta página eu faço a validação server side, bloqueando o ID após 5 tentativas de erro, tudo funciona, mas ao invés de mostrar a mensagem de erro na página login, a mensagem de erro aparece na própria valida.php desta forma:
{codigo":"0","mensagem":"Usu\u00e1rio n\u00e3o autorizado, voc\u00ea tem mais 4 tentativa(s) antes do bloqueio!"}
Ou seja ele retorna o JSON, mas no check.js não acessa a informação dele.
Este é um dos trechos do código que deveria retornar a mensagem:
<?php
session_start();
// Constante com a quantidade de tentativas aceitas
define('TENTATIVAS_ACEITAS', 5);
// Constante com a quantidade minutos para bloqueio
define('MINUTOS_BLOQUEIO', 30);
// Require da classe de conexão
require 'conn.php';
// Dica 1 - Verifica se a origem da requisição é do mesmo domínio da aplicação
if (isset($_SERVER['HTTP_REFERER']) && $_SERVER['HTTP_REFERER'] != "http://localhost/loginphp/login.php"):
$retorno = array('codigo' => 0, 'mensagem' => 'Origem da requisição não autorizada!');
echo json_encode($retorno);
exit();
endif;
Estou iniciando em ajax e PHP, retirei esse código deste tutorial: tutorial
código
é igual a 1, porém você não retorna o valor1
no arquivo validaLogin.php, você está retornando apenas o0
1
também? No seu caso, o JavaScript não vai funcionar pois o usuário será redirecionado ao clicar no botão entrar, para evitar isso adicionetype="button"
no botão e corrija a URL em$.ajax({ ... })