Validate users using Modal Bootstrap

Question

Validate users using Modal Bootstrap

Navigation

#1 by (0 votes)

0

I am validating user access using the traditional method:

IwouldlikethismessagetoappearinaModalBootstrap.Itriedthecodebelow,butthemodalbackgroundappears(black)andclosesquickly,doesnotkeepthemodalopen:

HTML

<formmethod="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
 ?>

jquery twitter-bootstrap

asked by anonymous 04.07.2017 / 17:02

1 answer

Problem with removeAllRanges () how to put content of another blog (the posts) in my site wordpress (ex: last posts)?

score 0 · Accepted Answer

After much research, a question here and there, I was able to solve it. Below is the case for anyone who wants to use Modal Bootstrap as a solution to the traditional User or invalid login message.

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;
    });
});

Validate.php page

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