I have coded an HTML form and need to ensure that a user inputs a password in the Password field and repeats the same password in the Confirm Password field. To ensure they are equal, I have used a javascript function to make it possible. Also, I have disabled the Register button, and need to ensure it is only enabled if and only if the values entered in the two password boxes are equal. Everything works fine, however, when the values entered are equal, the button remains disabled, and a warning that the passwords do not match still remains.
Below is the code:
function checkConfirmation() {
var passcode = document.getElementById("password").value;
var confirmPasscode = document.getElementById("confirmPassword").value;
let btnSubmit = document.querySelector(".submit");
btnSubmit.disabled = true;
if (passcode != confirmPasscode) {
btnSubmit.disabled = true;
document.getElementById("notEqualPassCode").innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!';
} else {
btnSubmit.disabled = false;
document.getElementById("notEqualPasscode").innerHTML = '';
}
}<div class="form-group mb-3">
<label class="label" for="password">Password</label>
<input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required>
<span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="form-group mb-3">
<label class="label" for="confirmPassword">Confirm Password</label>
<input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeypress="checkConfirmation()">
<span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<span id="notEqualPassCode"></span>Please someone tell me what could be wrong.
function check() {
event.preventDefault();
form = document.getElementById('zero')
pass = document.getElementById('one').value
conf = document.getElementById('two').value
if(pass == conf){
console.log("match")
form.submit();
}else console.log('NO Match')
}<form id='zero'>
<input type='password' id='one'>
<input type='password' id='two'>
<input type='submit' onclick='check()' value='enter'>
</form>first, check for empty values, you don't want to match empty values.
then for your use case, you have to use onkeyup because you want to check the inputs when the user releases a key not when the user presses a key because the current key will not get registered.
function checkConfirmation() {
var passcode = document.getElementById("password").value;
var confirmPasscode = document.getElementById("confirmPassword").value;
var notEqualPassCode = document.getElementById("notEqualPassCode");
let btnSubmit = document.querySelector(".submit");
if (passcode == '' || confirmPasscode == '' || passcode != confirmPasscode) {
btnSubmit.disabled = true;
notEqualPassCode.innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!';
} else {
btnSubmit.disabled = false;
notEqualPassCode.innerHTML = '';
}
}<div class="form-group mb-3">
<label class="label" for="password">Password</label>
<input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required>
<span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="form-group mb-3">
<label class="label" for="confirmPassword">Confirm Password</label>
<input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeyup="checkConfirmation()">
<span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<button class="submit" disabled="true">submit</button>
<span id="notEqualPassCode"></span>