延迟 Parsley.js 表单提交

Question

我需要能够在提交时验证 Parsley 中的表单，但要延迟实际提交本身，直到完成其他（定时）操作。

我试过这个：

$("#myform").on('submit', function(e){
    e.preventDefault();
    var form = $(this);

    form.parsley().validate();

    if (form.parsley().isValid()){

        // do something here...

        setTimeout(function() {
            form.submit();
        }, 3000);

    }
});

正如您可能猜到的那样，form.submit() 只会让我陷入无限循环。如果不回顾验证，我无法确定如何在延迟后触发提交。为了清楚起见，我需要：

检查表格是否有效
做一些无关的事情
等待 X 秒
提交表单

有什么想法吗？是否有特定于 Parsley 的方法可以在不重新验证的情况下提交表单？

Answer 1

根据this question once an action is canceled (with preventDefault())，唯一的选择是再次触发它。

你已经在这么做了。您需要添加到逻辑中的是事件是否应该停止的条件。你可以使用这样的东西：

$(document).ready(function() {
  $("form").parsley();

  // By default, we won't submit the form.
  var submitForm = false;

  $("#myform").on('submit', function(e) {
    // If our variable is false, stop the default action. 
    // The first time 'submit' is triggered, we should prevent the default action
    if (!submitForm) {
      e.preventDefault();
    }
    var form = $(this);

    form.parsley().validate();

    // If the form is valid
    if (form.parsley().isValid()) {
      // Set the variable to true, so that when the 'submit' is triggered again, it doesn't
      // prevent the default action
      submitForm = true;
      // do something here...

      setTimeout(function() {
        // Trigger form submit
        form.submit();
      }, 3000);

    } else {
      // There could be times when the form is valid and then becames invalid. In these cases,
      // set the variable to false again.
      submitForm = false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form id="myform">
  <input type="text" name="field" required />
  <input type="submit" />
</form>

Answer 2

我正在积极开发处理 promise 的更新，因此您想要实现的目标将非常容易实现。

与此同时，它更难做到。我认为使用 remote 版本，您可以按如下方式发送提交事件：

$('.your-form').trigger($.extend($.Event('submit'), { parsley: true }))

延迟 Parsley.js 表单提交

Delay Parsley.js form submission

jquery

parsley.js