BBnepal-Accounts/application/views/student/student-password-reset.php

<style>
.error-msg {
  color: red; 
}
</style>
<style>
form label.error {
color: #ff0000;
}
</style>
<div class="container-login">
  <img src="<?php echo base_url(); ?>assets_student/images/LMS-Video-Animation-min.gif" class="login-image">
  <!-- <video  class="login-video" preload="metadata" playsinline autoplay muted loop  >
      <source src="<?php echo base_url(); ?>assets_student/images/login.webm#t=0.001" type="video/webm">
      <source src="<?php echo base_url(); ?>assets_student/images/login.webm#t=0.001" type="video/webm">
      Your browser does not support the video tag.
    </video> -->
  <header class="login-header">
    <div class="login-wrap">
      <div class="logo-wrap">
        <img src="<?php echo base_url(); ?>common_assets/<?= $school_info['color_logo']; ?>"> 
      </div>
    </div>
    <div class="header-menu-wrap">
      <div class="login-mob-menu"><i class="fas fa-bars"></i></div>
      <ul class="mob-menu">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="<?php echo base_url(); ?>student/admission-process"><button class="join-class-btn">Admission Process ></button></a></li>
      </ul>
    </div>
  </header>
  <div class="login-body"> 
    <div class="login-box-wrap">
      <div class="login-box">
        <h3>Reset Password</h3>

        <?php        
        if($this->session->flashdata('success')) { ?>

          <div class="alert alert-success alert-dismissible fade show" role="alert">
            <p><?php echo $this->session->flashdata('success') ?></p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

        <?php }?>  
        <?php        
        if($this->session->flashdata('failed')) { ?>

          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <p><?php echo $this->session->flashdata('failed') ?></p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

        <?php }?>  

        <form class="login-form" id="forgot_password" action="<?php echo base_url() ?>student/send_email_reset_password" method="post">
          
          <div class="login-form-row">
            <p>Enter the registered Email address to send request for resetting password.</p> </div>

          <div class="login-form-row">
            <label>Email address</label>
            <input type="text" name="studentID" placeholder=" " id="email" onkeydown="hideMessages()">            
          </div> 
          <p class="error-msg loginError text-danger font-weight-bold" style="text-align:left">Email Does not exist </p> 
         <p class="loading text-success" style="display:none">Please wait....</p>



          <div class="reset-passsword-btn" style="margin-top: 10px;">
           <button class="join-class-btn" type="submit" id="send_email">Send</button>
         </div>

       </form>                   
     </div>
   </div>
 </div>
</div>
<script>

  function hideMessages()
  {
    $('.error-msg').hide();
  }
  
  jQuery.validator.addMethod("emailregex", function(value, element) {

        return this.optional( element ) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/.test( value );
        }, 'Please enter a valid email address.');

  $("#forgot_password").validate({  
      rules: {
        studentID: {
          required: true,
          email:true,
          emailregex:true,
        },
        messages: {
            studentID : {
            required: "Please provide an email-id",
            },         
          },
      },
      
      submitHandler: function(form,e) {
      e.preventDefault();       
        var email = $('#email').val();
        $.ajax({
              url: '<?php echo base_url().'student/fp_check_is_emailid_valid/'?>', 
              type:'POST',
              data:{
                'email': email  
              },
              beforeSend: function() {
                $('.loading').show();
                $('.join-class-btn').hover(function() {
                    $(this).css({'cursor' : 'wait'})
                });
               $(document.body).css({'cursor' : 'wait'}); // Spinning
               $('.join-class-btn').prop('disabled', false);
              },
              success: function(result) {
              console.log(result);
                if (result == 'success') {

                //   $('.loading').hide();
                  $(document.body).css({'cursor' : 'default'}); // Not spinning
                   $('.join-class-btn').hover(function() {
                      $(this).css({'cursor' : 'default'})
                  });
                           
                  $('.error-msg').hide();
                  $('.loginSuccess').show();
                  form.submit();
                }
                else{ 
                  $('.error-msg').hide();
                  
                  $('.loginError').show();
                }
              }
            }); 
      }
    });


  $(document).ready(function(){  

     $('.error-msg').hide();
     
  });   
</script>