Sometimes, we want to check confirm password field in form without reloading page with JavaScript.

In this article, we’ll look at how to check confirm password field in form without reloading page with JavaScript.

How to check confirm password field in form without reloading page with JavaScript?

To check confirm password field in form without reloading page with JavaScript, we can check the input values.

For instance, we write

<label
  >password :
  <input name="password" id="password" type="password" />
</label>
<br />
<label
  >confirm password:
  <input type="password" name="confirm_password" id="confirm_password" />
  <span id="message"></span>
</label>

to add the password inputs.

Then we write

const check = () => {
  if (
    document.getElementById("password").value ===
    document.getElementById("confirm_password").value
  ) {
    document.getElementById("message").style.color = "green";
    document.getElementById("message").innerHTML = "matching";
  } else {
    document.getElementById("message").style.color = "red";
    document.getElementById("message").innerHTML = "not matching";
  }
};

const passwordInput = document.querySelector("#password");
const confirmPasswordInput = document.querySelector("#confirm_password");
passwordInput.onkeyup = check;
passwordInput.confirmPasswordInput = check;

to define the check function.

In it, we select the inputs with getElementById.

Then we get the value from each input with the value property.

And then we set the color and text content of the span according to whether the 2 values match or not.

Then we select the inputs and set their onkeyup property to the check function to call check as we type into the inputs.

Conclusion

To check confirm password field in form without reloading page with JavaScript, we can check the input values.