- Joined
- Aug 16, 2022
- Messages
- 52
- Reaction score
- 2
Hi Everybody,
With serious help from VBService, I've built a snippet to compare two user input variables.
If the two inputs are not equal, the snippet runs fine and simply changes the background
colour of the second input to "red" until the two values are equal.
However, the user can still submit the form even when those two values are not equal.
HA! I hadn't thought that far ahead!
So... if the vaues of PW1 and PW2 are not equal, the two questions I have are:
With serious help from VBService, I've built a snippet to compare two user input variables.
If the two inputs are not equal, the snippet runs fine and simply changes the background
colour of the second input to "red" until the two values are equal.
However, the user can still submit the form even when those two values are not equal.
HA! I hadn't thought that far ahead!
So... if the vaues of PW1 and PW2 are not equal, the two questions I have are:
- Can I interrupt the flow so that focus will be placed back on the input section for PW2 until the inputs for PW1 and PW2 are equal?
- Do I have to wait until a user selects the <Submit> button, or can I place an interrupt as soon as the user moves focus to the next <Input> section?
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Uhhhhh, What can I do next?</title>
</head>
<body>
<div class="container">
<form method="post" id="registration" action="scripts/RegistrationHandler.php">
<div class="row">
<div class="col">
<div class="input-group">
<label for="PW!">Enter Password:</label>
<input type="password" class="form-control" placeholder="Enter Your Password" id="PW1" name="PW1" title="Enter the password you will use to sign-in" required="required">
</div>
</div>
<div class="col">
<div class="input-group">
<label for "PW2">Re-Enter Password:</label>
<input type="password" class="form-control" placeholder="Enter Your Password Again" id="PW2" name="PW2" title="re-Enter the password you will use to sign-in" required="required"><br>
</div>
</div>
</div>
<!--Insert a script to evaluate "what to do" if pWord1 is equal/unequal to pWord2 -->
<script>
const pw1 = document.querySelector('#PW1'),
pw2 = document.querySelector('#PW2');
let isPasswordsMatch = false; // variable called flag
// Use for both event: input
pw1.addEventListener('input', checkPasswordEquality);
pw2.addEventListener('input', checkPasswordEquality);
function checkPasswordEquality() {
// Remove leading and trailing whitespace from the password values
const password1 = pw1.value.trim();
const password2 = pw2.value.trim();
if (password1.length && password2.length) {
if (password1 === password2) {
// Passwords are the same
pw2.style.backgroundColor = '#FFFF00';
isPasswordsMatch = true;
} else {
// Passwords are different
pw2.style.backgroundColor = '#FF0000';
isPasswordsMatch = false;
}
} else {
pw2.style.backgroundColor = '';
pw2.value = '';
isPasswordsMatch = false;
}
}
</script>
<div>
<div class="col">
<div class="input-group">
<label for="fName">Name:</label>
<input type="text" id="fName" name="fName" placeholder ="enter your First Name"><br>
</div>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
</div>
</body>
</html>
