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

<style>
	form label.error, #secNameerr {
		color : red;
		font-size:13px;
	}
</style>
<main class="common_margin" id="main">
	<!----admin template Exam---->
	<div class="main-wrap">
      <div class="syllabus-wrap">
			<div class="syllabus-main">

				<form action="<?php echo base_url() ?>/teacher/teacher-change-password"  method="post" id="pwdForm">

					<?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 } ?>

						<div class="subsec_sec">
							<div class="subject_l" style="width: 367px;">
								<div class="subject_lsec">
									<div class="common-heading" style="margin-left:0;"><?php echo $title ?></div>
									<div class="subject_lformarea">
										<div class="form-group">
											<label for="">Password<span class="text-danger font-weight-bold">*</span></label>
											<div class="input-group" id="show_password">
												<input type="password" name="password" class="form-control" placeholder="Enter New Password" />
												<div class="input-group-append">
													<div class="input-group-text">
														<a href="" style="color: inherit;"><i class="fa fa-eye-slash" id="pas_one"></i></a>
													</div>
												</div>
												<label id="password-error" class="error" for="password"></label>
											</div>
										</div>
										
										<div class="form-group w-100">
											<label for="">Retype New Password<span class="text-danger font-weight-bold">*</span></label>
											<div class="input-group" id="show_retype_password">
												<input type="password" name="confirm_password" class="form-control" placeholder="Re-Enter Password"/>
												<div class="input-group-append">
													<div class="input-group-text">
														<a href="" style="color: inherit;"><i class="fas fa-eye-slash" id="pas_two"></i></a>
													</div>
												</div>
											</div>
											<label id="confirm_password-error" class="error" for="confirm_password"></label>
										</div>
										<input type="submit" class="subject_addbtn" value="Save">
									</div>
								</div>
							</div>
						</div>
					</form>				
			</div>
		</div>
	</div>
	<!----admin template Exam end---->
</main>
<!--End right-top side-->
<style type="text/css">
	.subject_addbtn {
	    background: #032da1;
	    border-radius: 3px;
	    color: #fff;
	    padding: 6px 38px;
	    border: none;
	    font-size: 16px;
	    cursor: pointer;
	}
	#icon_two, #icon_one {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    color: #878a8d;
}
</style>
<script>
    $("#icon_one").click(function() {

        $("#icon_one").toggleClass("eye-icon");

        var input = $("#password");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });

    $("#icon_two").click(function() {

        $("#icon_two").toggleClass("eye-icon");

        var input = $("#confirm_password");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.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.');

    $("#pwdForm").validate({

        ignore: ":hidden",  
        rules: {
            password: {
                required: true,
                minlength: 6,
                maxlength: 16,
                passwordregex:true
            },
            confirm_password : {
                required : true,
                minlength : 6,
                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'
            },
            confirm_password : {
                required : 'Please re-enter your password',
                equalTo : "Please enter the same password again."
            },

        },
        submitHandler: function(form) {                    
            form.submit();
        }
    });


    $(document).ready(function() {
	    $("#show_password a").on('click', function(event) {
	        event.preventDefault();
	        if($('#show_password input').attr("type") == "text"){
	            $('#show_password input').attr('type', 'password');
	            $('#pas_one').addClass( "fa-eye-slash" );
	            $('#pas_one').removeClass( "fa-eye" );
	        }else if($('#show_password input').attr("type") == "password"){
	            $('#show_password input').attr('type', 'text');
	            $('#pas_one').removeClass( "fa-eye-slash" );
	            $('#pas_one').addClass( "fa-eye" );
	        }
	    });

	    $("#show_retype_password a").on('click', function(event) {
	        event.preventDefault();
	        if($('#show_retype_password input').attr("type") == "text"){
	            $('#show_retype_password input').attr('type', 'password');
	            $('#pas_two').addClass( "fa-eye-slash" );
	            $('#pas_two').removeClass( "fa-eye" );
	        }else if($('#show_retype_password input').attr("type") == "password"){
	            $('#show_retype_password input').attr('type', 'text');
	            $('#pas_two').removeClass( "fa-eye-slash" );
	            $('#pas_two').addClass( "fa-eye" );
	        }
	    });
	});
</script>