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" /> 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.
real_escape_string
recomendaría que valides todo del lado del cliente y en el servidor uses consultas preparadas.