how to check confirm password field in form without reloading page or clicking on button?

Question

Hello i need some help i sure this topic have been answer before but i try use some of the reference from how to check confirm password field in form without reloading page I woud like that the password and confirm password will display the error if password do not match without have to click on submit button or reloading page i have my code below where it don't work, i would like for some help as how i can display it of course i not using just a normal form i am using

<form class="needs-validation" novalidate>

This is my code below

function onChange() {
  const password = document.querySelector('input[name=validationpassword]');
  const confirm = document.querySelector('input[name=validationconfirmpassword]');
  if (confirm.value === password.value) {
    confirm.setCustomValidity('');
  } else {
    confirm.setCustomValidity('Passwords do not match');
  }
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
      <i class="bi bi-eye-slash" id="togglePassword"></i>
      <!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
                                    Enter a password!
                                </div> -->
      <!--<div id="passwordvalidator" class="invalid-tooltip password-notmeet">
      Password must meet the following requirements:
      <br><br>
      <label class="color-text"> At least one capital letter</label>
      <br>
      <label class="color-text"> At least one special character</label>
      <br>
      <label class="color-text"> At least one number</label>
      <br>
      <label class="color-text"> Be at least 7 letter</label>
    </div>
  </div>
</div> -->

      <div class="form-group row">
        <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter<br>&#10;Password:</label>
        <div class="col-6 d-flex">
          <input name="validationconfirmpassword" onChange="onChange()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
          <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

        </div>
      </div>
</form>

Answer 1

You can use onkeyup to check the passwords with every key press.

So instead of onChange even use this:

onkeyup ="onChange()"

function onChange() {
  const password = document.querySelector('input[name=validationpassword]');
  
  const confirm = document.querySelector('input[name=validationconfirmpassword]');
  console.log(confirm.value === password.value)
  if (confirm.value === password.value) {
    confirm.setCustomValidity('');
  } else {
    confirm.setCustomValidity('Passwords do not match');
  }
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
      <i class="bi bi-eye-slash" id="togglePassword"></i>
      <!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
                                    Enter a password!
                                </div> -->
      <!--<div id="passwordvalidator" class="invalid-tooltip password-notmeet">
      Password must meet the following requirements:
      <br><br>
      <label class="color-text"> At least one capital letter</label>
      <br>
      <label class="color-text"> At least one special character</label>
      <br>
      <label class="color-text"> At least one number</label>
      <br>
      <label class="color-text"> Be at least 7 letter</label>
    </div>
  </div>
</div> -->

      <div class="form-group row">
        <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter<br>&#10;Password:</label>
        <div class="col-6 d-flex">
          <input name="validationconfirmpassword" onkeyup ="onChange()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
          <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

        </div>
      </div>
</form>

Answer 2

It is generally not a good idea to use inline event handlers (<div onclick="...">.

Here is a minimal reproducable example. It uses a handler for the keyup and focusin events comparing both values and messages the user about the result. The handling is set for both password fields.

$(`#confirm_password, #passwords`).on({
  keyup: handleConfirmation,
  focusin: handleConfirmation} );

function handleConfirmation() {
  const pass = $(`#passwords`).val();
  const compare = $(`#confirm_password`).val();
  
  // one of the fields is empty, remove message
  if (!pass.trim() || !compare.trim()) {
     return $(`#toggleconfirmPassword`).html(``)
  }
  
  // otherwise, compare and display result
  const isOk = pass === compare;
  $(`#toggleconfirmPassword`).html(isOk ? ` OK ` : `Passwords are not equal (yet)`);
}

body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

#toggleconfirmPassword {
  color: red;
  font-weight: bold;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="validationpassword" class="col-form-label passwordadduser">
  *Password:
</label>
<input name="validationpassword" type="password" id="passwords"
    placeholder="Password" required>
<div>
  <label for="validationconfirmpassword">
    *Re-enter password:
  </label>
  <input name="validationconfirmpassword" type="password" 
    id="confirm_password" placeholder="Confirm Password" required>
  <i id="toggleconfirmPassword"></i>
</div>

Answer 3

You have to use onkeyup() event for check conform password.

Here down is example:

function myFunction() {
  var password = document.querySelector('input[name=validationpassword]').value;
  var confirm = document.querySelector('input[name=validationconfirmpassword]').value;
  
  var matchedOrNot = (confirm == password) ? "Password matched" : "Password not matched"; 

  var color = (matchedOrNot == "Password matched") ? "green" : "red";

  document.getElementById("toggleconfirmPassword").className = color;

  document.getElementById("toggleconfirmPassword").innerHTML = matchedOrNot;
}

.red
{
     margin-top: 5px;
     color: red;
     font-weight: bold;
}
    
.green
{
     margin-top: 5px;
     color: green;
     font-weight: bold;
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter Password:</label>
    <div class="col-6 d-flex">
      <input name="validationconfirmpassword" onkeyup="myFunction()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
      <br>
      <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

    </div>
  </div>
</form>