BBnepal-Accounts/application/views/teacher/teacher-new-password.php

<style type="text/css">
  .error{
    color: red;
  }
</style>

 <div class="login-body"> 
    <div class="login-box-wrap">
      <div class="login-box">
        <h3>Create New Password</h3>
        <form class="login-form" id="recreatePassword" action="<?php echo base_url()?>teacher/change_teacher_password" method="post"> 
          <?php if($teacher_data){?>
          <div class="login-form-row"><p>Please reset your password</p></div>
          <input type="hidden" name="student_id" value="<?php echo $teacher_data['id']; ?>">
          <input type="hidden" name="student_email" value="<?php echo $teacher_data['email']; ?>">

          <div class="login-form-row">
              <input type="password" name="password" id="password" class="pass" placeholder="New Password"  required>
              <span class="passwrd-icon icon-y"><i class="far fa-eye"></i></span>
          <p class="loginErr loginErr-pass text-danger"></p>
          </div>

          <div class="login-form-row">
              <input type="password" name="password_confirm" id="re_pass" class="re_pass" placeholder="Re-enter Password" required>
              <span class="con-pass icon-y"><i class="far fa-eye"></i></span>
              <p class="loginErr loginErr-rePass text-danger"></p>
            <!-- <h5>Both Passwords Must Match</h5></div> -->
            <p class="loginSuccess text-success"></p>
          </div>

          <div class="login-form-row" style="margin-top: 10px;">
            <button type="submit" class="join-class-btn">Reset Password</button>
          </div>
        <?php } ?>
        </form>                   
      </div>
    </div>
  </div>

  <script>
    //PASSWORD SHOW
  $(".passwrd-icon").click(function() {

$(".passwrd-icon").toggleClass("icon-y");

  var input = $( ".pass");
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
}); 
$(".con-pass ").click(function() { 
$(".con-pass").toggleClass("icon-y");

  var input1 = $( ".re_pass");
  if (input1.attr("type") == "password") {
    input1.attr("type", "text");
  } else {
    input1.attr("type", "password");
  }
});
</script>
 <script>



  jQuery.validator.addMethod("passwordregex", function(value, element) {
      return this.optional( element ) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!#%*?&])[A-Za-z\d@$#!%*?&]{6,16}$/.test( value );
    }, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.');

  $("#recreatePassword").validate({  
      rules: {
        password: {
             required: true,
             minlength:6,
             maxlength:12,
             passwordregex:true
         },
         password_confirm:{
             required: true,
             equalTo : '#password'
         },
      },
      messages: {
          password : {
            required : 'Please enter a valid password',
            minlength : 'Password should be more than 6 characters',
            maxlength : 'Password should not exceed 16 Characters'
          },
          password_confirm : {
            required : 'Please re-enter your password',
            equalTo : "Please enter the same password again."
          },

      },

      submitHandler: function(form) {    
              
                   form.submit();
              },
              highlight: function(element, errorClass) {
                         
               window.scrollTo(0, 0);
               
               },
               unhighlight: function(element, errorClass) {
               //$(element).closest(".form-group").removeClass("has-error");
               },
          
      
    });

// function myFunction() {
//   var x = document.getElementById("password");
//   if (x.type === "password") {
//     x.type = "text";
//   } else {
//     x.type = "password";
//   }
// }
</script>