<style type="text/css"> .error{ color: red; } </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(); ?>assets_student/images/erisn-blue.png"> </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>Create New Password</h3> <form class="login-form" id="recreatePassword" action="<?php echo base_url()?>student/change_student_password" method="post"> <?php if($student_data){?> <div class="login-form-row"><p>Please reset your password</p></div> <input type="hidden" name="student_id" value="<?php echo $student_data['id']; ?>"> <input type="hidden" name="student_email" value="<?php echo $student_data['email']; ?>"> <div class="login-form-row"> <input type="password" name="password" id="password" class="pass" placeholder="New Password" required> <p class="loginErr loginErr-pass text-danger"></p> </div> <div class="login-form-row"> <input type="password" name="password_confirm" id="re_pass" class="re_pass" placeholder="Re-enter Password" required> <p class="loginErr loginErr-rePass text-danger"></p> <!-- <h5>Both Passwords Must Match</h5></div> --> <p class="loginSuccess text-success"></p> </div> <div class="login-form-row" style="margin-top: 10px;"> <button type="submit" class="join-class-btn">Reset Password</button> </div> <?php } ?> </form> </div> </div> </div> <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.'); $("#recreatePassword").validate({ rules: { password: { required: true, minlength:6, maxlength:12, passwordregex:true }, password_confirm:{ required: true, 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' }, password_confirm : { required : 'Please re-enter your password', equalTo : "Please enter the same password again." }, }, submitHandler: function(form) { form.submit(); }, highlight: function(element, errorClass) { window.scrollTo(0, 0); }, unhighlight: function(element, errorClass) { //$(element).closest(".form-group").removeClass("has-error"); }, }); // function myFunction() { // var x = document.getElementById("password"); // if (x.type === "password") { // x.type = "text"; // } else { // x.type = "password"; // } // } </script>