0

Estou validando o acesso de usuários usando o método tradicional:

inserir a descrição da imagem aqui

Gostaria que essa mensagem aparecesse em um Modal Bootstrap. Tentei o código abaixo, porém aparece o fundo do modal (preto) e fecha rapidamente, não mantém o modal aberto:

HTML

<form method="post" id="login-form">
<li>
         <label  id="texto">Login:</label>
         <input required="required" type="text" name="LoginAcesso" id="usuario" placeholder="Matrícula" class="form-control" />
        </li>
        <li>
         <label>Senha:</label>
         <input required="required" type="password" name="SenhaAcesso" id="password" placeholder="Senha" class="form-control" />
         </li>
        <li class="text-right">
         <button type="submit" name="submit" id="botao" class="btn btn-primary">Acessar</button>
        </li>
</form>

MODAL

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Login e senha inválidos</h4>
      </div>
      <div class="modal-body">
        <p>Tente novamente.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechr</button>
      </div>
    </div>
  </div>
</div>

JQUERY

<script type="text/javascript">
$(document).ready(function(){
  $('#login-form').submit(function(){
    var login = $('#username').val();
    var senha = $('#password').val();

 $.ajax({
   url : 'validar.php',
   type : 'POST',
   //dataType:"json",
   data : 'login='+login+'&senha='+senha,

  //beforeSend : function(){
//    alert('01');
  //  $('#myModal').modal('show');
// },
   success : function(data){
    alert(data);
     if(data == 1){
         $('#myModal').modal('show');
     }else{
        alert('02');
     }
   }
 });
});
});
</script>

VALIDAR.PHP

<?php
    echo 1; // Teste
 ?>
9
  • Descreva "Não funcionou", por favor. No jQuery não deveria existir um .val() quando você define o valor de login e senha?
    – Woss
    Commented 4/07/2017 às 15:11
  • E no PHP, quais são os valores que chegam?
    – Woss
    Commented 4/07/2017 às 15:16
  • Quando dou um alert('login') ou alert('senha'), não chegam os valores, mesmo os campos preenchidos.
    – user24136
    Commented 4/07/2017 às 15:19
  • Mas alert dentro do arquivo PHP não será executado, pois o código não é executado pelo navegador. No PHP faça var_dump($_POST) e no jQuery, adicione console.log(data) em success.
    – Woss
    Commented 4/07/2017 às 15:22
  • na verdade o alert está dentro do jquery, após a linha var senha = $('#password');
    – user24136
    Commented 4/07/2017 às 15:23

1 Resposta 1

0

Depois de muito pesquisar, uma pergunta aqui e outra ali, consegui resolver. Segue abaixo para quem quiser usar o Modal Bootstrap como solução para a tradicional mensagem de Usuário ou login inválidos.

HTML/Modal

<form method="post" id="login-form">
<li>
 <label  id="texto">Login:</label>
 <input required="required" type="text" name="LoginAcesso" id="username" placeholder="Matrícula" class="form-control" />
</li>
<li>
 <label>Senha:</label>
 <input required="required" type="password" name="SenhaAcesso" id="password" placeholder="Senha" class="form-control" />
 <button type="button" id="show_password" name="show_password" class="fa fa-eye-slash" aria-hidden="true"></button>
</li>
<li class="text-right">
 <button type="submit" name="submit" class="btn btn-primary">Acessar</button>
</li>
</form>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header btn-danger">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i> Login e senha inválidos</h4>
      </div>
      <div class="modal-body">
        <p>Dados inválidos. Por favor, verifique suas credenciais e tente novamente!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

JQUERY

$(document).ready(function(){
   $('#login-form').submit(function() {
     data = $('#login-form').serialize();

     $.post("validar.php",{
            d: data,
     },
      function (d) {
        //console.log(d);
       if(d == 1){
           $('#myModal').modal('show');
        }else{
          var redirecionar = "pagina-de-acesso.php";
         $(window.document.location).attr('href',redirecionar);
        }
      });
      return false;
    });
});

Página validar.php

$sql = mysqli_query($conexao,"Query");
if(mysqli_num_rows($sql) == 0){
          echo 1;
       }else{    
          echo 0;
}

Você deve fazer log-in para responder a esta pergunta.