<style type="text/css"> .error{ color: red; } </style> <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets-bustracking/css/style-drivers.css"> <main class="common_margin" id="main"> <div class="row dash-main-row"> <div class="col-md-10 col-lg-10 p-0"> <a href="<?php echo base_url()?>drivers"> <button type="button" class="btn btn-dark deleted-btn btn-sm" >Back</button> </a> <div class="block-head"> <h3 class="dash-tab-head"><?php echo $title; ?></h3> </div> <?php $firstname=$lastname=$name= $contact_number= $licence= $dob= $address= $image= $doc= $doc2= $doc3 = ''; if ($driver_id > 0) { if (isset($detailsHere) && !empty($detailsHere)) { foreach ($detailsHere as $key => $value) { $name =explode(' ', $value['name']) ; $firstname = $name[0]; $lastname = $name[1]; $contact_number = $value['contact_number']; $licence = $value['licence']; $dob = $value['dob']; $address = $value['address']; $image = str_replace('assets-bustracking/images/driver_images/', '', $value['image']); $doc = str_replace('assets-bustracking/images/driver_images/', '', $value['document1']); $doc2 = str_replace('assets-bustracking/images/driver_images/', '', $value['document2']); $doc3 = str_replace('assets-bustracking/images/driver_images/', '', $value['document3']); } } } ?> <form action="<?php echo base_url() ?>add-edit-driver/<?php echo $driver_id ?>" method="post" id="adddriver" enctype="multipart/form-data"> <div class="input-row"> <div class="input-wrap"> <label for="">First name <span class="text-danger font-weight-bold">*</span></label> <input type="text" placeholder="First name" class="form-control add-drivers-input" name="first_name" value="<?php echo $firstname ?>"> </div> <div class="input-wrap"> <label for="">Last Name<span class="text-danger font-weight-bold">*</span></label> <input type="text" placeholder="Last Name" class="form-control add-drivers-input" name="last_name" value="<?php echo $lastname ?>"> </div> <div class="input-wrap"> <label for="">Driver's License Number<span class="text-danger font-weight-bold">*</span></label> <input type="hidden" name="driver_id" value="<?php echo $driver_id; ?>"> <input type="text" placeholder="Driver's License No" class="form-control add-drivers-input" name="licence" value="<?php echo $licence ?>"> </div> <div class="input-wrap"> <label for="">Contact <span class="text-danger font-weight-bold">*</span></label> <input type="text" placeholder="Contact" class="form-control add-drivers-input" name="contact" value="<?php echo $contact_number ?>" maxlength="10"> </div> <div class="input-wrap"> <label for="">Date of birth<span class="text-danger font-weight-bold">*</span></label> <input type="text" placeholder ="dd-mm-yyyy" name="dob" class="form-control add-drivers-input add-dob" id="dob" value="<?php echo $dob ?>"> </div> <div class="input-wrap"> <label for="">Address <span class="text-danger font-weight-bold">*</span></label> <input type="text" placeholder="Address" class="form-control add-drivers-input" name="address" value="<?php echo $address ?>"> </div> <?php if ($driver_id > 0) {?> <div class="input-wrap" style="flex-basis: 90%;margin-right: 20px;"> <label for="" class="mt-2">Change Password</label> <input type="checkbox" placeholder="Address" class="form-control add-drivers-input" name="address" value="<?php echo $address ?>" style="float: left;width: inherit;flex: auto;margin-right: 30px;" id="check-box"> </div> <style type="text/css"> .pass-change-data{ display: none; } </style> <?php } ?> <div class="input-wrap pass-change-data"> <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 paswd" > <span class="passwrd-icon icon-y"><i class="far fa-eye"></i></span> </div> <label style="display:none" class="form_err" id='password_error'></label> </div> </div> <div class="input-wrap pass-change-data"> <div class="form-group"> <label for="">Confirm Password<span class="text-danger font-weight-bold"> *</span></label> <div class="password-wrp"> <input type="password" id="confirm-password" name="confirm_password" class=" form-control password_hide_c" > <span class="con-pass icon-y"><i class="far fa-eye"></i></span> </div> <label style="display:none" class="form_err" id='confirm-password_error'></label> </div> </div> <div class="input-wrap"> <label for="">Add Image <span class="text-danger font-weight-bold">*</span></label> <div class="input-group add-drivers-input"> <div class="custom-file"> <input type="file" class="custom-file-input img-file" id="inputGroupFile00" name="image"> <label name="image" class="custom-file-label img-data" for="inputGroupFile00"> <?php echo $image ? $image: 'Add Image' ?> </label> </div> </div> <label id="inputGroupFile00-error" class="error" for="inputGroupFile00"></label> </div> <div class="input-wrap"> <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label> <div class="input-group add-drivers-input"> <div class="custom-file add-drivers-input"> <input type="file" class="custom-file-input add-drivers-input doc2-file" id="inputGroupFile02" name="doc2"> <label class="custom-file-label doc2-data" for="inputGroupFile02"><?php echo $doc2 ? $doc2: 'Document 2' ?> </label> </div> </div> <label id="inputGroupFile02-error" class="error" for="inputGroupFile02"></label> </div> <div class="input-wrap"> <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label> <div class="input-group add-drivers-input"> <div class="custom-file"> <input type="file" class="custom-file-input doc-file" id="inputGroupFile01" name="doc1"> <label class="custom-file-label doc-data" for="inputGroupFile01"><?php echo $doc ? $doc: 'Document 1' ?> </label> </div> </div> <label id="inputGroupFile01-error" class="error" for="inputGroupFile01"></label> </div> <div class="input-wrap"> <label for="">Add Document <span class="text-danger font-weight-bold">*</span></label> <div class="input-group add-drivers-input"> <div class="custom-file"> <input type="file" class="custom-file-input add-drivers-input doc3-file" id="inputGroupFile03" name="doc3"> <label class="custom-file-label doc3-data" for="inputGroupFile03"><?php echo $doc3 ? $doc3: 'Document 3' ?> </label> </div> </div> <label id="inputGroupFile03-error" class="error" for="inputGroupFile03"></label> </div> <div class="input-wrap"> <button type="submit" name="submit" class="btn btn-primary student-update-btn assign-btn" ><?php echo $title; ?></button> </div> </div> </div> </form> </div> </div> </main> <!--End right-top side--> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> <script defer src="<?php echo base_url(); ?>assets-bustracking/js/main.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <style type="text/css"> .error { color: red; font-size: 14px; /* position: absolute; */ margin: 0; } .add-drivers-input { margin-bottom: 0% !important; height: 34px; } .mb-4 { position: relative; } /*.custom-file{ position: relative; margin-bottom: 10px; } label#inputGroupFile00-error { position: absolute; z-index: 99; bottom: -20px; }*/ .custom-file-label{ overflow: hidden; background: #f2f0f0; } </style> <script> $(document).ready(function(){ jQuery.validator.addMethod("fullnameregex", function(value, element) { return this.optional(element) || /^[a-zA-Z ]{1,30}$/.test(value); }, 'Please enter alpha characters only '); jQuery.validator.addMethod("phonenumberregex", function(value, element) { return this.optional(element) || /^[0-9]{10}$/.test(value); }, 'Please enter a 10 digits valid phone number.'); jQuery.validator.addMethod("inputregx", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9 ]{3,50}$/.test(value); }, 'Please enter alpha and numeric characters only '); jQuery.validator.addMethod("patternregx", function(value, element) { return this.optional(element) || /^[A-Z]{2}[0-9]{11}$/.test(value); }, 'Please enter Proper Licence Number'); 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.'); $("#adddriver").validate({ rules: { first_name: { required: true, fullnameregex: true }, last_name:{ required: true, fullnameregex: true }, licence:{ required:true }, contact:{ required:true, phonenumberregex:true }, dob:{ required:true }, address:{ required:true, inputregx:true }, password:{ minlength: 6, maxlength: 12, passwordregex: true }, confirm_password: { required: true, equalTo: '[name="password"]' }, image:{ required: function(element){ var name = $('.student-update-btn').text(); if (name == 'Add Driver') { return true; }else{ return false; } } }, doc2:{ required: function(element){ var name = $('.student-update-btn').text(); if (name == 'Add Driver') { return true; }else{ return false; } }, extension: "pdf" }, doc1:{ required: function(element){ var name = $('.student-update-btn').text(); if (name == 'Add Driver') { return true; }else{ return false; } }, extension: "pdf" }, doc3:{ required: function(element){ var name = $('.student-update-btn').text(); if (name == 'Add Driver') { return true; }else{ return false; } }, extension: "pdf" } }, messages: { first_name: { required: "Please Enter Name" }, last_name:{ required: "Please Enter Last Name" }, licence:{ required:"Enter a Valid licence" }, contact:{ required:"Enter Valid Mobile Number" }, dob:{ required:"Please Enter Date of Birth" }, address:{ required:"Please Enter Address" }, image:{ required:"Add your Photo" }, doc1:{ required:"Enter Your Document", extension:"Accept Only PDF" }, doc2:{ required:"Enter Your Second Document", extension:"Accept Only PDF" }, doc3:{ required:"Enter Your Third Document", extension:"Accept Only PDF" } }, submitHandler: function(form) { form.submit(); } }); }); $('.img-file').change(function (e) { $('.img-data').text(e.target.files[0].name); }); $('.doc-file').change(function (e) { $('.doc-data').text(e.target.files[0].name); }); $('.doc3-file').change(function (e) { $('.doc3-data').text(e.target.files[0].name); }); $('.doc2-file').change(function (e) { $('.doc2-data').text(e.target.files[0].name); }); //change password check box $('input[type="checkbox"]').click(function(){ if($(this).prop("checked") == true){ $('.pass-change-data').show(); } else if($(this).prop("checked") == false){ $('.pass-change-data').hide(); } }); $("#dob").datepicker( { minDate: '-30Y',dateFormat: 'dd-mm-yy', maxDate: '-18Y' }); </script>