JSFiddle - React, Tailwind, and code Playground

by Adam Pavlov

HTML

<div class="error-msg"></div>
<br><br>

<form>
  <div class="form-group">
    <label>OLD PASSWORD</label>
    <input type="password" class="form-control">
  </div>
  <div class="form-group">
    <label>NEW PASSWORD</label>
    <input type="password" id="password1" class="form-control">
  </div>
  <div class="form-group">
    <label>CONFIRM PASSWORD</label>
    <input type="password" id="password2" class="form-control">
  </div>
</form>
<button type="button" id="submitBtn" class="btn btn-primary">UPDATE</button>

CSS

.error-msg {
    width: 100%;
    font-family: 'nobelregular';
    color: #ff0002;
    display: none;
}

JavaScript

$(document).ready(function() {
          $("#submitBtn").click(function(){
              validate();
          });
        });

        function validate() {
          var password1 = $("#password1").val();
          var password2 = $("#password2").val();
            if(password1 != password2) {
               $(".error-msg").html("Password and confirmation password do not match.").show();                    
            }
            else {
                $(".error-msg").html("").hide();  
                ValidatePassword();
            }
        }

        function ValidatePassword() {
          var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,}$/;
          var txt = document.getElementById("password1");
          if (!regex.test(txt.value)) {
              $(".error-msg").html("The password does not meet the password policy requirements.").show();
          } else {
              $(".error-msg").html("").hide();
              window.location.href='change-password-msg.html';
          }
        }