1

Estoy intentando realizar un login mediante html y php usando Ajax y JQuery.

He conseguido hacer:

Que el usuario introduzca los datos y mediante jQuery y Ajax llame a un script php que comprueba los datos en la BBDD.

Lo que me gustaría hacer es:

Si el usuario y/o contraseña no son correctos, que muestre un elemento oculto en mi index.php con el mensaje de error.

Código del index:

<?php
  session_start();
  // Checking the session
  if(isset($_SESSION['userSession'])){
    if(!empty($_SESSION['userSession'])){
      header("Location: models/userPanel.php");
    }
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- CSS imports -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css" />
    <!-- JQuery include -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- <script type="text/javascript" src="js/loginForm.js"></script> -->
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
    <!-- Navigation Bar content -->
    <nav class="navBar">
      <ul>
        <li><a class="hover" href="index.php">Index</a></li>
      </ul>
    </nav>
    <!-- Body content -->
    <div class="bodyContainer">
      <!-- Form -->
      <div class="formContainer">
        <p class="formTitle">Login form</p>
        <form id="loginForm" method="post">
          <div class="formDataContainer">
            <div id="error"><!-- Error will be shown here ! --></div>
            <label for="userMail"><span class="labelText">Email</span></label>
            <input type="email" placeholder="Enter Username" name="userMail" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <label for="psw"><span class="labelText">Password</span></label>
            <input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <button type="submit" id="btnLogin" name="btnLogin">Sing in</button>
            <button type="button" id="registerBtn" onclick="location.href='models/registerForm.php';">Register</button>
          </div>
        </form>
      </div>
    </div>
    <script>
        $('form[id=\'loginForm\']').on('submit', function(e){
            e.preventDefault();
            var data = $(this).serialize();
            $.ajax({
                type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
                    $('#error').fadeOut();
                    $('#btnLogin').html('Sending ...');
                }, success: function(response){
                    if (response == 'ok'){
                        $('#btnLogin').html('Signing In ...');
                        setTimeout(' window.location.href = "home.php"; ', 4000);
                    }
                    else
                    {
                        $('#error').fadeIn(1000, function(){
                            $('#error').html(response);
                            $('#btnLogin').html('Sign In');
                        });
                    }
                },
            });
            return false;
        });
        /* login submit */
    </script>
  </body>
</html>

Código del archivo loginProcess.php

<?php
  session_start();
  print_r($_POST);
  require_once 'dbConfig.php';
  $query = "SELECT idUser, name, surname, mail, level
            FROM users
            WHERE mail = ? AND password = ?";
  // TODO recoger datos
  if(isset($_POST["userMail"]) && isset($_POST["psw"])){
    if(!empty($_POST["userMail"]) && !empty($_POST["psw"])){
      // TODO comprobamos la base de datos
      // Clean obtained data
      $userName = $mysqli->real_escape_string(trim($_POST["userMail"]));
      $passwd = $mysqli->real_escape_string(trim($_POST["psw"]));
      // Crypt the Password
      $password = md5($passwd);
      print_r($password);
      // Attempt to prepare the query
      if($stmt = $mysqli->prepare($query)){
        if($stmt->bind_param("ss", $userName, $password)){
          $stmt->execute();
          // Obtain the result
          $result = $stmt->get_result();
          // If there is no result, we will show an error message
          if($result->num_rows === 0){
            echo "<script>
                    $('#error').fadeIn(3000, function(){
                        $('#error').html(Invalid username or password);
                        $('#btnLogin').html('Sign In');
                    });
                  </script>";
          }else{
            $row = $result->fetch_array();
            print_r($row);
          }
          $mysqli->close();
        }else{
          // TODO handle error

        }
      }

    }
  }
?>

¿Cómo podría llamar al elemento del index? Estoy intentando hacer un echo con un script pero parece no funcionar.

Gracias por todo.

1 respuesta 1

1

Ya tienes prácticamente todo listo, incluso el manejador Javascript de qué hacer con <div id="error"></div> cuando recibes el error. Pero lo que me parece que no funcionará es imprimir en loginProcess.php el código Javascript. En su lugar, sólo debieras devolver el mensaje de texto, ya que en tu propio Javascript ya tienes el mismo código, y en general, él debiera manejar el comportamiento en HTML.

Vale decir, lo que ya pusiste en el loginProcess.php cambiarlo por:

 if($result->num_rows === 0){
            echo "Invalid username or password";
          }else{

Y en cuanto a tu elemento oculto en el index.php, pues con el mismo Javascript te tocaría ocultarlo y mostrarlo, según corresponda.

Usando JQuery:

// lo ocultas al iniciar el script, y cuando el usuario vuelva a enviar el formulario
$("#error").fadeOut();

EDITADO:

Como sugerencia de dónde y cuándo "ocultar" tu <div> de error, sería primero al iniciar el script y, segundo, cuando envías el formulario: En tu código de index, yo lo colocaría en este sector:

    </form>
  </div>

    </div>
    <script>

    $("#error").fadeOut();  // <-- aqui (1)
    $('form[id=\'loginForm\']').on('submit', function(e){
        e.preventDefault();
        $("#error").fadeOut();  // <-- y aqui (2)
        var data = $(this).serialize();

La idea es que (1) se oculte a los ojos del usuario de la web la primera vez que entra, y (2) se vuelva a ocultar cada vez que haces el envío del formulario (para los casos en que quedó visible tras hacer un intento fallido de login previo; si el usuario no falla el login, el mensaje no aparece de nuevo).

3
  • Sí. Soluciona el problema pero no entiendo lo de ocultar el error. En un principio se muestra el error si pongo los datos como no válidos pero, si vuelvo a introducir los datos y pongo los correctos, aparece el mensaje de error y luego desaparece. Commented el 9 abr. 2018 a las 16:04
  • Me refiero a que si tú quieres que tu mensaje de error aparezca en determinado momento (cuando falla el login), eso quiere decir que debe estar oculto todo el resto del tiempo. Para ello usas la línea de código que te dejé al final. Ahora, el momento donde debes usarla sería... mejor edito mi respuesta para mostrarte mi sugerencia.
    – quinqui
    Commented el 9 abr. 2018 a las 17:16
  • 1
    Genial. Todo arreglado así. Gracias por tu paciencia. Commented el 10 abr. 2018 a las 7:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.