Ensuring passwords input in form match using javascript

Question

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.

I added your code as a runnable snippet, with the console displayed. You can immediately see you are getting JS errors bcs there is no button. Once you hit that JS error, everything stops working ... When debugging JS, use [your browser's devtools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) console - you would have seen this error and solved your own problem. — Don't Panic, Dec 24 '21 at 21:51
Also - (1) don't disable the button _after_ you check, for a better UX, [check as the user types](https://stackoverflow.com/questions/5457739/change-value-of-input-onchange) and enable submit button once they match. Second, you [don't prevent the form being submitted](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) so even though you disable the button, the event will bubble. — msanford, Dec 24 '21 at 21:52
I obviously had a submit button... That was the most relevant part of the code that I needed checking. I knew that was the part with the error, but didn't know what the error was — Caleb Chege, Dec 25 '21 at 11:49

score -1 · Answer 1 · answered Dec 24 '21 at 21:38

-1

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>

answered Dec 24 '21 at 21:38

DCR

14,737
12
52
115

3

What did you do, and why do you think it would help? What have you changed from OP's code? [Code-only answers are considered low quality on SO](https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers). – Don't Panic Dec 24 '21 at 21:52
Your `if` uses braces whilst your `else` does not. Also, prefer strict type comparison `===` over basic `==` – Cjmarkham Dec 24 '21 at 22:26

score -1 · Accepted Answer · answered Dec 24 '21 at 22:11

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>

The underlying issue was that OP had no `submit` button. Your answer assumes the issue was using `keyup` when that wasn't mentioned by the OP — Cjmarkham, Dec 24 '21 at 22:28

Ensuring passwords input in form match using javascript

2 Answers2