提交表单时如何防止模式隐藏?

时间:2019-05-07 13:12:05

标签: php vue.js bootstrap-modal

我正在使用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; 
}

1 个答案:

答案 0 :(得分:0)

我希望您可以通过js代码提交表单,而不是使用submit按钮。 在Jquery中,它将如下所示:

$("#MyForm").submit()

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