<style> form label.error, #secNameerr { color : red; } </style> <main class="wraper responsive-width" id="main"> <!----admin template Exam----> <div class="admin_tempblock"> <div class="admin_tempsec"> <div class="admin_sec"> <form action="<?php echo base_url() ?>/admin/admin-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"> <div class="subject_lsec"> <div class="subject_lhead"><?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="password-wrp"> <input type="password" name="password" id="password" class="form-control" placeholder="Enter your password"> <span class="passwrd-icon icon-y" id="icon_one"><i class="far fa-eye"></i></span> </div> </div> <div class="form-group"> <label for="">Retype New Password<span class="text-danger font-weight-bold">*</span></label> <div class="password-wrp"> <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Enter your password"> <span class="passwrd-icon icon-y" id="icon_two"><i class="far fa-eye"></i></span> </div> </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--> <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(); } }); </script>