Validate users using Modal Bootstrap

Asked

Viewed 1,048 times

0

I am validating user access using the traditional method:

inserir a descrição da imagem aqui

I would like that message to appear in a Modal Bootstrap. I tried the code below, but the bottom of the modal (black) and closes quickly, does not keep the modal open:

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>

VALIDATE.PHP

<?php
    echo 1; // Teste
 ?>
jquery twitter-bootstrap

  • Describe "It didn’t work", please. In jQuery there shouldn’t be a .val() when you set the value of login and senha?

  • And in PHP, what are the values that come?

  • When I give an Alert('login') or Alert('password'), the values do not arrive, even the fields filled.

  • But alert inside the PHP file will not be executed because the code is not executed by the browser. In PHP do var_dump($_POST) and in jQuery, add console.log(data) in success.

  • actually Alert is inside jquery, after the line var password = $('#password');

  • Then you should show up at least one [object Object] in the alert.

  • I got a little progress in the code. I’m now getting the value. With this I reformulated my question and updated the code.

  • in var login = $('#username'). val(); is using username and in the form using id="user", will not return the value

  • Hello Leo. The problem is that the Modal does not open. About the value informed, thank you for the observation. I made the adjustment.

Show 4 more comments

1 answer

0


After a lot of research, a question here and there, I managed to solve. It follows below for those who want to use the Modal Bootstrap as a solution to the traditional Invalid user or login.

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

Page validate.php

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

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.