 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<br><br><br>
 <div class="row">
   <div class="col-md-6 col-md-offset-3">
     <div class="content-top-1 box box-danger">
       <br>
       <div class="box-body">
         <?= form_open("/users/reset"); ?>
         Current Password
         <div class="form-group has-feedback">
           <input type="password" id="curpass" name="password" class="form-control" required pattern="^.{6,}" title="Password should be atleast 6 characters" placeholder="Current Password" />
         </div>
         New Password
         <div class="form-group has-feedback">
           <input type="password" id="pass" name="newpassword" class="form-control" required pattern="^.{6,}" title="Password should be atleast 6 characters" placeholder="Desired Password" />
         </div>
         Retype New Password
         <div class="form-group has-feedback">
           <input type="password" id="cpass" class="form-control" name="cpassword" required pattern="^.{6,}" title="Password should be atleast 6 characters" placeholder="Retype desired password" />
         </div>
         <div><label id="label" class="label label-danger"></div>

         <button type="submit" class="btn btn-danger btn-block">Reset Password</button>
         <br><br>
         </form>
       </div>
     </div>
   </div>
 </div>



 <script type="text/javascript">
   $(function() {
     $('#pass, #cpass').change(function() {
       var pass = $('#pass').val();
       var cpass = $('#cpass').val();
       if (pass != "" && cpass != "") {
         var newpass = $('#curpass').val();
         if (pass != cpass) {
           $('#cpass').val('');
           $('#label').html("Password and Confirmation passwords do not match");
         } else if (pass == newpass) {
           $('#pass').val('');
           $('#label').html("New Password cannot be the same as the current password");
         } else
           $('#label').html("");
       }
     });
   })
 </script>