提交表单时如何防止模式隐藏？答案

【问题标题】：How can I prevent modal to hide when submitting form?提交表单时如何防止模式隐藏？
【发布时间】：2019-09-25 03:57:09
【问题描述】：

我正在使用 laravel 的启发进行服务器端验证。我正在努力将验证放入我的模式以及 type="submit" 按钮。当我单击带有空输入的保存按钮时，模式正在关闭，当我再次打开模式时，错误已经存在。我想避免在提交表单时隐藏模式。如果输入为空，如何停止模式关闭？我正在使用 type="submit" 按钮？

  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; 
}

【问题讨论】：

标签： php vue.js bootstrap-modal

【解决方案1】：

我希望您可以从 js 代码提交表单，而不是使用 submit 按钮。在 Jquery 中它看起来像这样：

$("#MyForm").submit()

使用它可以控制何时根据模态提交表单。希望对您有所帮助。

【讨论】：