CODEWITHSUNDEEP
javascripthtml
E tom
E tom

Reputation: 117

Password verification for webpage in html and javascript

I have a registration webpage where a user inputs information like name and password. There are two inputs for password to verify they are the same password but when I submit the form, it says the passwords don't match, even when they do.

<form id="registration-info" method="POST" action="/registration" >

...

<div class="mb-3">
                <label for="password">Password</label>
                <input type="password" class="form-control" name="password" id="password" required>
                <div class="invalid-feedback">
                    Please enter a password.
                </div>
            </div>

            <div class="mb-3">
                <label for="repeat_password">Repeat Password</label>
                <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
                <script>
                    form = document.getElementById("registration-info");
                    form.onclick = function() {
                        var password = document.getElementById("password");
                        var repeat_password = document.getElementById("repeat_password");

                        if(password.value != repeat_password.value) {
                            repeat_password.setCustomValidity("Passwords Don't Match");
                        } else {
                            repeat_password.setCustomValidity('');
                        }
                    }
                </script>

            </div>

Upvotes: 0

Views: 519

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21485

There are two problems with your code.

  1. You've put your validation code in an onclick handler on the <form> element. This means the script will never run at all, because the user doesn't click on the <form>, they click on the submit <button>. Instead use an onsubmit handler on the form.
  2. You aren't doing anything to prevent the form from submitting if the password values don't match. One way to do this is to return false from the onsubmit handler.

Here is a corrrected version:

form = document.getElementById("registration-info");

form.onsubmit = function() {
  var password = document.getElementById("password");
  var repeat_password = document.getElementById("repeat_password");
  if (password.value != repeat_password.value) {
    repeat_password.setCustomValidity("Passwords Don't Match");
    console.log("Passwords don't match");
    return false; // prevent the form from submitting
  } else {
    repeat_password.setCustomValidity('');
  }
}
 
// reset the customValidity when the field is modified, so corrected
// values won't trip up on past errors:
document.getElementById("repeat_password").onchange = function(e) {
  e.target.setCustomValidity('')
}
.invalid-feedback {display:none}
<form id="registration-info" method="POST" action="/registration">
  <div class="mb-3">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" id="password" required>
    <div class="invalid-feedback">
      Please enter a password.
    </div>
  </div>

  <div class="mb-3">
    <label for="repeat_password">Repeat Password</label>
    <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
  </div>
  <input type="submit" value="Submit" id="registration-info-submit">
</form>

Another way to do this -- and to be honest if I'd been familiar with setCustomValidity before this question, this probably would have been my answer in the first place -- might be to set the customValidity message values when the field values change, instead of on form submit. (If a customValidity value is set, it will prevent the form submit from running at all.)

document.getElementById("registration-info").onchange = function() {
  var password = document.getElementById("password");
  var repeat_password = document.getElementById("repeat_password");
  if (password.value != repeat_password.value) {
    repeat_password.setCustomValidity("Passwords Don't Match");
  } else {
    repeat_password.setCustomValidity('');
  }
}
<form id="registration-info" method="POST" action="/registration">
  <div class="mb-3">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" id="password" required>
  </div>

  <div class="mb-3">
    <label for="repeat_password">Repeat Password</label>
    <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
  </div>
  <input type="submit" value="Submit" id="registration-info-submit">
</form>

(But note that this will leave your forms unvalidated in IE9 and below, which do not support setCustomValidity; the first snippet will validate the form in all browsers.)

Upvotes: 2

Raj Thakkar
Raj Thakkar

Reputation: 77

You did not take the values of the selected ids here. Inatead of taking values after in IF case try the following code. I hope that is the only reason.

var password = document.getElementById("password").value; 
var repeat_password = document.getElementById("repeat_password").value;

Upvotes: 0

Related Questions