'Javascript addEventListener doesn't execute
I have a form used to reset a password. On client side I am using vannila js to check if the input is valid however the javascript code doesn't execute completely. It gets the form,password and repeated password id's but it doesn't stop the form from submitting or executing the validation functions.
This is the password reset form. For server side I am using php to check if the proper values exist. If they don't the user can't access the page and the form doesn't exist. However all the data exists so I can see the form
<?php
require_once "../classes/dbh.classes.php";
require_once "../classes/reset-password.class.php";
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap link -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Bootstrap icons link-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!--Mapbox css link (optional)-->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet'/>
<!--Custom styles link-->
<link rel="stylesheet" href="../CSS/style.css">
<!--JQUERY LINK-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>LP Budgeting - reset password</title>
</head>
<body>
<!--HEADER START-->
<!--navbar start-->
<nav class="navbar navbar-expand-lg bg-black navbar-dark py-3 fixed-top">
<div class="container">
<a href="../index.php" class="navbar-brand">LP<span class="text-warning">Budgeting</span></a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="../index.php" class="nav-link">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<!--navbar end-->
<!--HEADER END-->
<!--RESET PASSWORD FORM START-->
<div class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Reset your password</h5>
<p>Please fill out the fields below and your password will be changed</p>
</div>
<div class="card-body">
<?php
if ($_GET['token'] && $_GET['email']) {
$token = $_GET['token'];
$email = $_GET['email'];
$check_user_class = new reset_password();
if ($check_user_class->check_user_4reset($email, $token)) {
?>
<form method="post" name="reset-form" id="reset-form" action="submit_new_password.php">
<?php
$fullUrl = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if (strpos($fullUrl, "error=passwords-mismatch") == true) {
if (isset($_SESSION["password-mismatch"])) {
echo $_SESSION["password-mismatch"];
unset($_SESSION["password-mismatch"]);
}
} elseif (strpos($fullUrl, "error=empty_fields") == true) {
if (isset($_SESSION['empty-passwords'])) {
echo $_SESSION["empty-passwords"];
unset($_SESSION["empty-passwords"]);
}
} else {
if (isset($_SESSION["password-change-success"])) {
echo $_SESSION["password-change-success"];
unset($_SESSION["password-change-success"]);
}
}
?>
<div class="form-group mb-3">
<input type="hidden" name="email" value="<?php echo $email; ?>">
<input type="hidden" name="token" value="<?php echo $token; ?>">
<label for="password">Enter New password</label>
<input type="password" id="password" class="form-control" name='password'
placeholder="New password"><br>
<label for="password2">Repeat your password</label>
<input type="password" id="password2" class="form-control"
name='password_repeat' placeholder="Repeat your password">
</div>
<div class="form-group mb-3">
<input type="submit" id="submit_password" name="submit_password"
class="btn btn-primary">
</div>
</form>
<!--Custom Javascript-->
<script src="../js/password-reset-error-handling.js" type="module"></script>
<!--RESET PASSWORD FORM END-->
<?php
} else {
//That user doesn't exist
echo "error";
}
}
?>
<!--Javascript/Bootstrap links-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
The javascript code
const reset_form = document.getElementById('reset-form');
const password = document.getElementById('password');
const password_repeat = document.getElementById('password2');/////////////////all of these variables have the proper value i.e the id of the input fields and the form
reset_form.addEventListener('submit', e => { /////////this is the part that it skips
if (validateInputs()) {
e.currentTarget.submit();
} else {
e.preventDefault();
}
});
function validateInputs() {
//Get the value from inputs
const passwordValue = password.value.trim();
const passwordRepeatValue = password_repeat.value.trim();
let return_value = false;
//These variables are set with one when the value of the input field is correct
let password_check = 0;
let password_repeat_check = 0;
if (passwordValue === '') {
//Show error and set error class
setError(password, 'Password field cannot be empty');
} else if (passwordValue.length <= 6) {
setError(password, 'Please enter a longer password');
} else {
//Add success class
setSuccess(password);
password_check = 1;
}
if (passwordRepeatValue === '') {
//Show error and set error class
setError(password_repeat, 'Password repeat field cannot be empty');
} else if (passwordValue !== passwordRepeatValue) {
setError(password_repeat, 'The passwords do not match');
} else if (passwordRepeatValue.length <= 6) {
setError(password_repeat, "Repeated password needs to be longer")
} else {
//Add success class
setSuccess(password_repeat);
password_repeat_check = 1;
}
if (name_check === 1 && email_check === 1 && password_check === 1 && password_repeat_check === 1) {
return_value = true;
} else {
return_value = false;
}
return return_value;
}
function setError(element, message) {
element.className = "form-control error";
const small = document.getElementById("message-" + element.id);
small.classList.remove('success');
//Add error message and icon
small.innerHTML = message + ' <i class="fas fa-exclamation-circle">';
//Add error class
small.classList.add("error");
}
const setSuccess = (element) => {
element.className = "form-control success";
const small = document.getElementById("message-" + element.id);
small.classList.remove('error');
//Add success icon
small.innerHTML = '<i class="fas fa-check-circle">';
//Add success class
small.classList.add("success");
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|