<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">×</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">×</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>