JSFiddle - React, Tailwind, and code Playground

HTML

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

<form>
  <div class="form-group">
    <label>OLD PASSWORD</label>
    <input name="oldPassword" id="oldPassword" 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() {
  	var oldVal = $('#oldPassword').val() || "";
    alert(oldVal);
    if(oldVal == ""){
    	$(".error-msg").html("First you have to fill Old Password.").show();
      return false;
    }
    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';
  }
}