Password and Confirm password validation using Javascript

In previous article, I mentioned Encrypt and Decrypt string in Javascript but in this article, I have mentioned how we can check or validate if password and confirm password entered by user is same using javascript or jQuery, one by one.

To validate password and confirm password to be same, we will have to call jQuery or Javascript function, once password and confirm password is entered by user.

Using Javascript

So suppose, we have below HTML

<div>  
  <label>Password:</label>
  <input name="password" id="password" type="password" onkeyup='validatePassword();' />
</div>
<br/>
<div> 
  <label>Confirm password:</label>
  <input type="password" name="confirm_password" id="confirm_password"  onkeyup='validatePassword();' /> 
  <span id='message'></span>
</div>

as you can see onkeyup we are calling Javascript function(validatePassword), which will match if both input's has same or equal value.

function validatePassword() {
  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';
  }
}

As we are calling Javascript function onkeyup, so we don't need to reload(postback) page for confirm password validation.

Here is the working fiddle:

Output:

Using jQuery

If you are using jQuery in your web-application, then you can also use it for password and confirm password match validation.

Considering we have same HTML as above

<div>  
  <label>Password:</label>
  <input name="password" id="password" type="password" onkeyup='validatePassword();' />
</div>
<br/>
<div> 
  <label>Confirm password:</label>
  <input type="password" name="confirm_password" id="confirm_password"  onkeyup='validatePassword();' /> 
  <span id='message'></span>
</div>

jQuery code will be as below

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
     $('#message').html('Matching').css('color', 'green');
  } 
  else 
  {
     $('#message').html('Not Matching').css('color', 'red');
  }
});

Output would be same as above. Here is the working fiddle: https://jsfiddle.net/kgwbymLz/

Using jQuery Validate

If you are using jQuery validate in your web-application, then you need to apply these rules

       jQuery('.validatedForm').validate({
        rules : {
            password : {
                minlength : 5
            },
            password_confirm : {
                minlength : 5,
                equalTo : '[name="password"]'
            }
        }})
        

You can check a working fiddle here:https://jsfiddle.net/k8gczs6e/

Hope this helps.

You may also like to read:

Uncaught Error: "Cannot use import statement outside a module"

How to convert iso date to date-format JavaScript?

Error "TypeError: Cannot read property 'classList' of null"

5+ Best Ezoic alternatives

How to center div in tailwind?

How to get size of an Amazon S3 bucket?

How to define C# multiline string literal?