Question

好的，所以已经提出了这个问题的各种形式，但我找不到足够的信息来使我的具体案例有效，所以这里是我尝试做的事情的背景：

我有一个表单，其中一半的元素像正常一样显示在页面上，另一半的元素以模态显示（在同一页面上，但开始隐藏，所有元素都预先填充了从数据库中删除信息，因此它们默认有效）。这个表单还有2个提交按钮，一个位于元素上半部分页面的页面上，另一个位于模态本身上。当单击第一个提交按钮时，我希望表单执行常规的本机HTML5验证（是的，它必须在整个表单上执行此操作，包括模式中的那些字段，但是，正如我所说，它们是预先填充的关闭数据库，因此它们默认有效。

但是，一旦页面上的所有元素都有效，我就不希望表单提交。相反，我想用另一半元素显示模态（再次，已预先填充了来自数据库的信息 - 我希望用户确认该信息）。当点击模态中包含的提交按钮时，我希望它执行相同的常规HTML5验证，然后实际提交表单（只要它仍然有效）。

所以，我在另一个答案中找到了以下jquery，它允许浏览器在表单上执行HTML5验证，但阻止了提交事件：

    $(function() {
      $('#form').submit(function(event){

        // cancels the form submission
        event.preventDefault();

      });
    });

我的问题是，我只希望上面的jquery在第一个提交按钮的点击上运行，而不是第二个按钮的点击。如果有办法做到这一点，我认为我的问题将得到解决。同样，我这样做的原因是因为我希望用户确认在完整提交整个表单之前弹出的模式上显示的信息...我知道我可以通过不使用莫达尔，并在一页上拥有一切，但我真的想使用模态。很抱歉，如果这个问题放错了地方，已经得到了回答，混淆或其他任何问题。如果它令人困惑，或者您需要更多解释/代码，请告诉我，我将编辑问题。

提前致谢。

Answer 1

所以要做你要问的事情，这应该可以解决问题：

 $(function() {
  //track whether the form has been submitted, define here so it persists across submit events
  var submitted = false;
  $('#form').submit(function(event){
    // the outer function's variables are available in the inner function
    if (!submitted) {
      event.preventDefault();
      submitted = true;
    }
  });
});

然而，我真的不确定这是实现最终目标的最佳方式。更好的方法是使用javascript验证（例如jQuery validation plugin），在点击按钮（不是提交）后验证第一部分，然后跟踪表单的初始部分是否有效或不是，而不是是否已提交，然后决定显示模式。

即做类似的事情（伪代码，不会按原样工作，只是为了说明方法）：

 $(function() {
  $('#form').on('click','button.first', function(e){
    //check that the first part of the form is valid when the `<button class="first">` is clicked, if it is, show the modal:
    var firstSectionValid = $('#form').find('#first-section').validate();
    if (!firstSectionValid) {
      showModal();
    }
  });
});

然后在表单的模态部分只有一个提交按钮。

Answer 2

jQuery提供.one()方法来完成这项工作。

$('#form').one( "submit", function(event){

    event.preventDefault();

});

如何实现1个表单的2个提交按钮。两者都应该触发HTML5验证，但实际上只应提交一个

2 个答案: