I'm trying to validate password and see if they match using JavaScript if passwords don't match show an error, but some for weird reason is like Javascript is not being detected, just submits the wrong fields.
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Reset Your Password</title>
</head>
<body>
<script "text/Javascript">
document.querySelector('.button').onclick = function (){
var password = document.querySelector('.password').value,
confirmPassword = document.querySelector('.confirmPassword').value;
if(password === ""){
alert("Field cannot be empty.");
}
else if(password !== confirmPassword){
alert("Password didn't match try again");
}else if(password === confirmPassword){
alert("Password match")
}
}
</script>
<div class="elelment">
<h2>Reset Your Password</h2>
<div class="element-main">
<h1>Forgot Password</h1>
<form th:action="@{/api/auth/reset_password}" method="post" style="max-width: 350px; margin: 0 auto;">
<input type="hidden" name="token" th:value="${token}" />
<div class="border border-secondary rounded p-3">
<div>
<p>
<input type="password" name="password" id="password" class="password"
placeholder="Enter your new password" />
</p>
<p>
<input type="password" class="confirmPassword" id="confirmPassword" placeholder="Confirm your new password"
/>
</p>
<p class="text-center">
<input type="submit" value="Change Password" class="button" />
</p>
</div>
</div>
</form>
</div>
</div>
<div class="copy-right">
<p>? 2021 Reset Password Form. All rights reserved</a></p>
</div>
</body>
</html>
AM not sure why JavaScript is not being detected and being applied to the form to validate the password fields
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
