提交表单时如何防止模态隐藏？

Question

I'm working with my server-side validation with inspiring from laravel. I'm struggling putting validation in my modal and also with type="submit" button. When I click the save button with empty inputs the modal is closing and when I open the modal again the error is already there. I want to avoid modal to hide when submitting the form. How can I stop modal to close if the inputs are empty? I'm using type="submit" button?

  addUnitCategory : function() {
        axios({
            method : "POST",
            url : this.urlRoot + "unit_category/add_unit_category.php",
            data : {
                description : this.unit_category_description,
                unit : this.unit_category_unit
            }
        }).then(function (response){
            vm.retrieveUnitCategory();
            swal("Congrats!", " New unit category added!", "success");  
            vm.clearData();
        }).catch(error => {
            console.info(error.config);
        });
    },
    validationCategoryUnit : function() {
        if (this.unit_category_description || this.unit_category_unit) {
            $('#myModal').modal('hide');
            vm.addUnitCategory();
            return true;
        }
        if (!this.unit_category_description || !this.unit_category_unit) {
            return false;
        }   
    },

   <--Form-->
   <form method="post" @submit="validationCategoryUnit()">
   <--Button-->
   <div class="modal-footer">
    <button type="submit" @click="validationCategoryUnit()">Save</button>
   </div>

   <--Validation-->

   if($_SERVER['REQUEST_METHOD'] == "POST") {
    $validation = new Validation();
    $data = [
        "unit_category_description" => $_POST['unit_category_description'] ? 'unit_category_description' : '',
        "unit_category_unit" => $_POST['unit_category_unit'] ? 'unit_category_unit'  : '',
    ];
    $validation->validate($data, [
        "unit_category_description" => "required|maxlen:45",
        "unit_category_unit" => "required|minlen:5|maxlen:20"
    ]);

    $errors = $validation->getErrors();
} else {
    $data = [
       "unit_category_description" => "",
       "unit_category_unit" => ""
    ];
    $errors = [
        "unit_category_description" => "",
        "unit_category_unit" => ""
    ];
}
 if (isset($_POST['submit'])) {
    if($data) {
    echo $data; 
}

Answer 1

I you want you can submit the form from your js code instead of using submit button. In Jquery it will look like this:

$("#MyForm").submit()

Using that you can control when the form is submitted according to the modal. Hope it helped.