Validation on old password field

Question

Stucked how to apply validation if old password not entered. Need validation if anyhow user forgot to enter the old password. Thanks in advance.

FIDDLE DEMO

$(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';
          }
        }

Answer 1

$(document).ready(function() {
			$("#old-password").change(function(){
       var value = $("#old-password").val();
     if(value===''){
     alert("please enter Old Password");
     }
      
      });
          $("#submitBtn").click(function(){
              validate();
          });
        });

        function validate() {
         var value = $("#old-password").val();
           if(value===''){
           
           alert("please enter Old Password");
           }
          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';
          }
        }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error-msg"></div>
<br><br>

<form>
  <div class="form-group">
    <label>OLD PASSWORD</label>
    <input type="password" id="old-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>

you can do validation for old password like this snippet and you can also validate that password using ajax call if you want to validate old password at client side

Answer 2

You have to check first that you old password input filled or not. Please see my code may be it can help you. See this live JSFiddle

HTML Code -

<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 Code -

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

JS Code -

$(document).ready(function() {
  $("#submitBtn").click(function() {
    var oldVal = $('#oldPassword').val() || "";
    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';
  }
}