为什么我的提交按钮在 bootstrap 型号上不起作用？

Question

每当我单击提交按钮时，它的模式都不会弹出（会弹出，但只是一瞬间）。连接到提交按钮的模式的目的是确保用户不会在表单中有未填写的字段时重定向到下一页（通过使用验证规则）。我正在使用 bootstrap、codeigniter4 和 php。有人可以帮助我吗？

模态代码如下：

<?php if (isset($validation)) :?>
                  
                   
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">The following fields are required </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <div class="text-danger">
        <?= $validation->listErrors()?>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
 

<?php endif;?>

这是按钮的代码：

<button type="submit"class="btn btn-primary me-2" id="submit" data-bs-toggle="modal" data-bs-target="#exampleModal">Submit</button>

非常感谢任何帮助，谢谢！

Answer 1

据我了解，如果用户未填写所有详细信息，您希望弹出模型。实现此目的的最简单方法是首先检查是否存在任何验证错误。类似于：

<?php if($validation_errors){ ?>
<button type="button"class="btn btn-primary me-2" id="submit" data-bs-toggle="modal" data-bs-target="#exampleModal">Submit</button>
<?php }else{ ?>
<button type="submit"class="btn btn-primary me-2" id="submit">Submit</button>
<?php } ?>

使用 bootstrap alerts.

更方便

为什么我的提交按钮在 bootstrap 型号上不起作用？

Why is my submit button not working on bootstrap models?

php

codeigniter

bootstrap-4