I am developing a login system, where I need to return the validation message to the user in a div on the login page itself, however the error message is appearing on the validation page. I am using Bootstrap and PHP with 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:
The code below should return an error message in the div #message
<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
On this page I do server side validation, blocking the ID after 5 error attempts, everything works, but instead of showing the error message on the login page, the error message appears in valida.php itself this way:
{codigo":"0","mensagem":"Usu\u00e1rio n\u00e3o autorizado, voc\u00ea tem mais 4 tentativa(s) antes do bloqueio!"}
In other words, it returns JSON, but in check.js it does not access its information.
This is one of the snippets of code that should return the message:
<?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;
I'm starting in ajax and PHP, I removed this code from this tutorial: tutorial