<main class="common_margin" id="main"> <div class="main-wrap"> <div class="w-50"> <button class="btn btn-dark btn-md"> <a href="javascript:history.go(-1)">Back</a> </button> <div class="my-leaves-top pt-3"> <h1 class="my-leaves-heading">Leave Application</h1> </div> <?php if (!empty($leave)) { ?> <form action="<?= base_url() ?>teacher/ar_leave_application" method="post"> <div class="pt-2"> <?php foreach ($leave as $key => $value) { ?> <div class="row leave-app-row align-items-center"> <div class="col-md-4"> <h6>To :</h6> </div> <div class="col-md-4"> <p><?= $value['teacher_name'] ?></p> </div> </div> <div class="row leave-app-row align-items-center"> <div class="col-md-4"> <h6>From date :</h6> </div> <div class="col-md-4"> <p><?= date('d-m-Y', strtotime($value['from_date'])) ?></p> </div> </div> <div class="row leave-app-row align-items-center"> <div class="col-md-4"> <h6>To date :</h6> </div> <div class="col-md-4"> <p><?= date('d-m-Y', strtotime($value['to_date'])) ?></p> </div> </div> <div class="row leave-app-row align-items-center"> <div class="col-md-4"> <h6>Leave Title :</h6> </div> <div class="col-md-4"> <p><?= $value['title'] ?></p> </div> </div> <input type="hidden" name="id" value="<?= $value['id'] ?>"> <div class="row leave-app-row-reason pt-4"> <div class="col-md-12"> <h6>Reason :</h6> <p> <?= $value['reason'] ?> </p> <div class="leave-process-btns mt-5"> <button type="submit" class="submit-btn">Approve</button> <a class="reject-btn mx-4 text-white d-flex align-items-center" data-toggle="modal" data-target="#exampleModalCenter"> Reject </a> </div> </div> </div> </form> <?php } ?> </div> <?php } ?> </div> </div> <!-- Modal --> <div class="modal leave-modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header leave-modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle"> Reason for Rejection </h5> </div> <form action="<?= base_url() ?>teacher/ar_leave_application" method="post" id="rejected_form"> <div class="modal-body"> <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" onkeypress="return lettersNumbersCheck(event)" name="rejected_msg" placeholder="Description"></textarea> <label id="exampleFormControlTextarea1-error" class="error mt-2" style="color:red" for="exampleFormControlTextarea1"></label> </div> <input type="hidden" name="id" value="<?= $leave_id ?>"> <div class="modal-footer leave-modal-footer"> <div class="leave-process-btns"> <button type="submit" class="submit-btn">Submit</button> <a class="text-white d-flex align-items-center reject-btn mx-4" data-toggle="modal" data-target="#exampleModalCenter"> Cancel </a> </div> </div> </form> </div> </div> </div> <!-- /*Modals Ends*/ --> </main> <script type="text/javascript"> function lettersNumbersCheck(e) { var keyCode = e.keyCode || e.which; //Regex for Valid Characters i.e. Alphabets and Numbers. var regex = /^[a-zA-Z0-9\-\s]+$/; //Validate TextBox value against the Regex. var isValid = regex.test(String.fromCharCode(keyCode)); return isValid; } jQuery.validator.addMethod("alphanumeric", function(value, element) { return this.optional(element) || /^[a-z\0-9\-\s]+$/i.test(value); }, "Please enter alphanumeric Characters only"); $("#rejected_form").validate({ rules: { rejected_msg: { required: true, minlength: 3, alphanumeric: true }, }, messages: { rejected_msg: { required: "Please provide a reason", minlength: "Please enter more than 2 Characters" }, }, submitHandler: function(form, e) { form.submit(); } }); </script>