BBnepal-Accounts/application/views/teacher/teacher-reset.php

<style>
.error-msg {
  color: red; 
}
</style>
<style>
form label.error {
color: #ff0000;
}
</style>

  <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() ?>teacher/reset-email" method="post">
          
          <div class="login-form-row" style="display:none">
            <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="teacherID" 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().'teacher/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);
              $('.error-msg').hide();
                if ($.trim(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{ 
                  $(document.body).css({'cursor' : 'default'}); // Not spinning
                   $('.join-class-btn').hover(function() {
                      $(this).css({'cursor' : 'default'})
                  });

                  $('.error-msg, .loading').hide();
                  
                  $('.loginError').show();
                }
              }
            }); 
      }
    });


  $(document).ready(function(){  

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