CODEWITHSUNDEEP
javascripthtmlvalidation
Sanjo Simon
Sanjo Simon

Reputation: 21

Password and confirm password don't match

I have a password and confirm password field like below.

enter image description here

I have used the same elements and script in 2 other different forms, but it isn't working in one of the forms.

var password = document.getElementById('pwd'), confirm_password = document.getElementById('cpwd');
    function validatePassword() {
        if (password.value != confirm_password.value) {
            confirm_password.setCustomValidity('Passwords Don\'t Match');
        } else {
            confirm_password.setCustomValidity('');
        }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
<div class="input-field col s12 m6">
  <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required="">
  <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label>
</div>
                    
<div class="input-field col s12 m6">
  <input id="cpwd" name="cpwd" type="password" class="validate"  required="">
  <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label>
</div>


  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

Upvotes: 0

Views: 10673

Answers (3)

Sanjo Simon
Sanjo Simon

Reputation: 21

There was just a class conflict in the remaining script and there was no issue as such.

Upvotes: 0

Srikrushna
Srikrushna

Reputation: 4945

Password: <input id="pwd" name="pwd" type="password"><br><br>
Conform Password: <input id="cpwd" name="cpwd" type="password">
<div id="errorMsg"></div>
<script>
var password = document.getElementById('pwd');
confirm_password = document.getElementById('cpwd');
    function validatePassword() {
        if ((confirm_password.value!='')&&(password.value != confirm_password.value)) {
            document.getElementById('errorMsg').innerHTML='Passwords Don\'t Match';
        } else {
            document.getElementById('errorMsg').innerHTML='';
        }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
</script>

Upvotes: 1

gyre
gyre

Reputation: 16777

Instead of using keyup or change event, I would suggest listening to the input event.

From the relevant article on MDN:

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.

var password = document.getElementById('pwd'),
  confirm_password = document.getElementById('cpwd');

function validatePassword() {
  if (password.value !== confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}
password.oninput = validatePassword;
confirm_password.oninput = validatePassword;
<div class="input-field col s12 m6">
  <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required="">
  <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label>
</div>

<div class="input-field col s12 m6">
  <input id="cpwd" name="cpwd" type="password" class="validate" required="">
  <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label>
</div>

Upvotes: 0

Related Questions