How to validate bootstrap modal using PHP codes? - php

Question

I want to validate every data that the user input in modal. The problem is not working at all, even I put the "required" in the text input same problem. It accept empty string. I don't want to accept empty string and the maximum length that user can input 45. I used bootstrap to create a modal and PHP for server side
<?php require_once('../../private/initialize.php'); ?>
<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
$validation = new Validation();
$data = [
"category_description" => $_POST['category_description']
];
$validation->validate($data, [
"category_description" => "required|maxlen:45"
]);
$errors = $validation->getErrors();
} else {
$data = [
"category_description" => ""
];
$errors = [
"category_description" => ""
];
}
if (isset($_POST['submit'])) {
if($data) {
echo $data;
}
<div class="modal" id="myModal1" > <!-- start update modal -->
<div class="modal-dialog">
<div class="modal-content " style="height:auto">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Update Category</h4>
<button #click="clearData" type="button" class="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<!-- Modal body -->
<form method="post" action="unit_category/index.php">
<div class="modal-body">
<div class="form-group">
<div class="col-lg-12">
<input type="hidden" class="form-control" id="category_id" name="category_id" v-model="category_id" disabled>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" id="category_description" name="category_description" v-model="category_description" value="<?php echo $data['category_description'] ?>" placeholder="Enter Description" class="form-control <?php if(!empty($errors['category_description'])) { echo 'is-invalid'; } ?>" required>
<div class="invalid-feedback"><?php echo $errors['category_description'] ?></div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" #click="updateCategory" class="btn btn-primary" data-dismiss="modal">Update Category</button>
</div>
</form>
</div>
</div>
</div> <!-- end update modal -->