2

Estoy realizando un proyecto en el cual tengo que dar de alta usuarios mediante un formulario en html con PHP. Para el envío de los datos, estoy usando jQuery y Ajax para hacer el submit de manera asíncrona.

Mi página de resgistro de usuario es la siguiente:

<?php
  session_start();
  // Required files
  require_once '../php/logOut.php';
  require_once '../php/redirections.php';
  require_once '../php/passwordGenerator.php';
  require_once '../php/printDataProcess.php';
  // Checking the session
  if(!isset($_SESSION['userSession'])){
    header("Location: ../index.php");
  }
  // Checking the session
  if (!isset($_SESSION['created'])) {
    $_SESSION['created'] = time();
  } else if (time() - $_SESSION['created'] > 3600) {
      // session started more than 1 hour ago
      session_regenerate_id(true);    // change session ID for the current session and invalidate old session ID
      $_SESSION['created'] = time();  // update creation time
      logOut();
  }

  if (isset($_GET['logOut'])) {
    logOut();
  }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
    <!-- CSS imports -->
    <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/registerUser.js"></script>
    <!-- <script type="text/javascript" src="../js/checkMail.js"></script> -->
    <title>Create user</title>
  </head>
  <body>
    <!-- Navigation Bar content -->
    <?php
      $userListHandler = PrintDataHandler::getInstance();
      $userListHandler->printNavBar();
     ?>
    <!-- Body content -->
    <div class="bodyContainer">
    <?php
      echo "<div id='userGreet'>
              <h3>Welcome, ".$_SESSION['userSession']['name']." ".$_SESSION['userSession']['surname']."</h3>
            </div>";
    ?>
    <div class="formContainer">
      <p class="formTitle">Create a new user</p>
      <form id="registerForm" method="post">
        <div class="formDataContainer">
          <div id="error"><!-- Error will be shown here ! --></div>
          <label for="userName"><span class="labelText">Name</span></label>
          <input type="text" placeholder="Name" name="userName" minlength="2" maxlength="100" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
          <label for="userSurname"><span class="labelText">Surname</span></label>
          <input type="text" placeholder="Surname" name="userSurname" minlength="2" maxlength="100" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
          <label for="userMail"><span class="labelText">Email</span></label>
          <input type="email" placeholder="Enter email" id="userMail" name="userMail" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
          <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" required>
          <label for="pswRepeat"><span class="labelText">Repeat your password</span></label>
          <input type="password" placeholder="Enter Password" name="pswRepeat" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
          <button id="btnCancel" name="btnCancel" onclick="location.href = 'userPanel.php';">Cancel</button>
          <button type="submit" id="btnRegister" name="btnRegister">Register the user</button>
        </div>
      </form>
    </div>
    </div>
  </body>
</html>

El formulario, como podemos ver, tiene dos campos para introducir la contraseña, uno de los cuales es de confirmación.

Me gustaría que, en cuanto el usuario deje de hacer focus en el último campo de la contraseña, se compruebe de manera asíncrona si las contraseñas introducidas son iguales mediante jQuery.

Por otra parte, ese mismo script debería poder comprobar que el email que inserto no existe en la BBDD (pero ese problema lo puedo solucionar fácilmente).

Ahora mismo, no dispongo de un script de jQuery como tal, ya que estoy aprendiendo a usar jQuery.

Cuando envío los datos por el submit, llama a este script de jQuery:

$(document).ready(function(){
  $('#error').fadeOut();
  $('form[id=\'registerForm\']').on('submit', function(e){
      e.preventDefault();
      $("#error").fadeOut();
      var data = $(this).serialize();
      $.ajax({
          type: 'POST', url: '../php/registerProcess.php', data: data, beforeSend: function(){
              $('#error').fadeOut();
              $('#btnRegister').html('Sending ...');
          }, success: function(response){
              if (response == 'ok'){
                  $('#btnRegister').html('<img src="../resources/icons/ajax-loader.gif" /> &nbsp; Creating the user ...');
                  setTimeout(' window.location.href = "userCreated.html"; ', 3000);
              }else{
                  $('#error').fadeIn(1000, function(){
                  $('#error').html(response);
                  $('#btnRegister').html('Register the user');
                });
              }
          },
      });
      return false;
  });
});

Que a su vez ejecuta el script de php siguiente:

<?php
  require_once 'dbConfig.php';
  // Clean obtained data
  $userMail = $mysqli->real_escape_string(trim($_POST["userMail"]));
  $passwd = $mysqli->real_escape_string(trim($_POST["psw"]));
  $userSurname = $mysqli->real_escape_string(trim($_POST["userSurname"]));
  $userName =  $mysqli->real_escape_string(trim($_POST["userName"]));
  $level = 0;
  // Crypt the Password
  $password = md5($passwd);
  // Starting a transaction
  try{
    $mysqli->begin_transaction();
    // Attempt to prepare the query
    if($mysqli->query("INSERT INTO users (idUser,name,surname,mail,password,level)
                       VALUES (null,'$userName','$userSurname','$userMail','$password','$level')") === TRUE){
      $mysqli->commit();
      echo "ok";
    }
  }catch(Exception $e){
    $msli->rollback();
    echo $e;
  }
  $mysqli->close();
?>

Para comprobar que todo se sube bien a la BD lo que he hecho es recoger los datos del primer campo de contraseña.

¿Cómo podría conseguir que ese script, por ejemplo, asíncronamente comprobara que las contraseñas son iguales?

Gracias por todo.

3
  • Para el caso de la contraseña, no tienes que hacer la comprobación desde PHP luego no hace falta usar AJAX, puedes hacerlo directamente desde javascript o jquery, ya que tienes el valor de contraseña1 y contraseña2 en el propio form, solo tienes que hacer algo así cmo if(pwd1!=pwd2) { $(".error").append("no coinciden");}, siendo pwd1 y pwd2 los valores del input de los pwd y ".error" un div cualquiera en dónde mostrar el error.
    – track3r
    el 13 abr. 2018 a las 11:36
  • Hay un error de planteamiento del funcionamiento de tu programa: Me gustaría que, en cuanto el usuario deje de hacer focus en el último campo de la contraseña, se compruebe de manera asíncrona si las contraseñas introducidas son iguales mediante jQuery. Como ha dicho @track3r, ambos datos están del lado del cliente, por lo cual tienes que verificarlos in situ. El servidor no conoce esos datos. En cuanto a tu código de inserción en el servidor, en vez de usar la función real_escape_string recomendaría que valides todo del lado del cliente y en el servidor uses consultas preparadas.
    – A. Cedano
    el 13 abr. 2018 a las 12:34
  • Muchas gracias por vuestras respuestas, las tendré en cuenta. el 13 abr. 2018 a las 12:50

1 respuesta 1

1

Para comprobar que los campos están bien antes de hacer submit, puedes agregar el atributo onsubmit al form llamando a una función.

onsubmit="return validateForm();"

La funcion validateForm devuelve true o false dependiendo de si cumple los requisitos, y si es true hace la llamada a la action con el codigo del submit.

function validateForm()
{
    // Aqui vas comprobando tus datos
    var dato1 = $("#data1").val();
    if (dato1...)) { } else {
        alert("error con dato1");
        return false;
    }

 // Aqui vas comprobando tus datos
        var dato2 = $("#data2").val();
        if (dato2...)) { } else {
            alert("error con dato2");
            return false;
        }
 // Aqui vas comprobando tus datos
        var dato3 = $("#dato3").val();
        if (dato3...)) { } else {
            alert("error con dato3");
            return false;
        }

  return true;
}

Para comprobar que las contraseñas son iguales cuando sales del input seria asi:

<input type="password" onBlur="comprobarPassword();">

function comprobarPassowrd() {
       if($('#campoPassword1').val() !== $('#campoPassword2').val()) {
            /// Aqui haces lo que quieres cuando no coinciden
       }    
}

Espero haberte ayudado.

Tu Respuesta

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

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