Question

更新：最终目标（也是我面临的主要问题）是能够验证模态表单，隐藏表单并显示成功消息（仍在模态内）。一旦我知道如何以及在何处插入jQuery，以便在提交表单后就可以“做些事情”，那么我就可以处理剩下的事情。如果需要，我可以在下面取消该验证JS。另外，我正在使用iframe来防止用户被带到表单操作URL。

原始帖子：使用Bootstrap 4，我有一个表单模式，并希望在成功提交表单后保持模式打开，但是用表单提交的详细信息替换完整的表单。例如，我们有三个字段（名字，姓氏和电子邮件）。我们需要用户能够在提交之前查看这三个字段。

我遇到的第一个问题是在“成功”提交表单后无法弄清楚如何用jQuery“做某事”。我创建了一个触发警报的函数，但是它在验证表单之前触发了警报。

在下面的代码中，我正在使用iframe来使用户保持在同一页面上，但是不确定是否有更优雅的“ Bootstrap 4”方法来完成此操作。

<form action="```" type="post" target="submitFrame" class="needs-validation" novalidate id="addContact">
<iframe name="submitFrame" id="submitFrame" style="display:none;" width="0" height="0"></iframe>

$(document).ready(function(){
  $('#addContact').submit(function() {
    alert("Testing");
    ...do something after form successfully submitted
  }); 
});

//validation
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
        alert("Test message");
      }, false);
    });
  }, false);
})();

流程应如下所示。

单击按钮打开表单模式。
模态以表格形式打开。用户填写所有字段。单击下一步。
如果任何必填字段保留为空白，则其轮廓为红色。
完成所有字段并提交表单后，现在将显示信息。用户可以验证并单击提交。
当用户单击最终的“提交”时，模式将关闭。用户永远不会离开此页面。

在Bootstrap 4表单模式中完成表单后显示表单详细信息

0 个答案: