I am carrying out a project in which I have to register users through an html form with PHP. To send the data, I am using jQuery and Ajax to do the submit asynchronously.
My user registration page is as follows:
<?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>
The form, as we can see, has two fields to enter the password, one of which is for confirmation.
I'd like it to asynchronously check if the entered passwords are the same as soon as the user takes focus off the last password field using jQuery.
On the other hand, that same script should be able to verify that the email I insert does not exist in the DB (but I can easily solve this problem).
Right now, I don't have a jQuery script as such, as I'm learning how to use jQuery.
When I submit the data, it calls this jQuery script:
$(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;
});
});
Which in turn executes the following php script:
<?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();
?>
To verify that everything is uploaded correctly to the DB, what I have done is collect the data from the first password field.
How could I get that script to, for example, asynchronously check that the passwords are the same?
Thanks for everything.
To check that the fields are ok before submitting , you can add the attribute
onsubmit
byform
calling a function.The function
validateForm
returnstrue
orfalse
depending on whether it meets the requirements, and if it is true, it makes the call to the action with the code of the submit.To check that the passwords are the same when you leave the input, it would be like this:
I hope I've helped.