jquery - PreventDefault 不适用于 Zurb 验证(遵守)

Question

我的网站使用 zurb Foundation。它已经得到了自己的验证。这是a link到文档。

我使用以下代码来验证并提交我的表单数据。

$('#myForm').on('valid', function (g) {
g.preventDefault();

//ajax call to insert the data

});

我的问题是，我无法使用 preventDefault() 阻止此表单的默认提交。

有什么想法吗？

我尝试这样做。

 $('#myForm').on('valid submit', function (g) {
    g.preventDefault();

    //ajax call to insert the data

    });

这会阻止默认提交，但会插入数据两次。

Answer 1

正如我在另一个答案的评论中所述:

This doesn't stop the "invalid" event from executing the AJAX, as "valid" and "invalid" are both triggered by "submit". The result is the above function is called by "submit", and even if the form is invalid, the AJAX call is made.

只需稍加修改，该代码就可以工作:

$("#myForm").on("valid invalid submit", function(g){
  g.stopPropagation();
  g.preventDefault();
  if (g.type === "valid"){
    // AJAX call
  }
});

这是围绕 Abide 验证事件的一种古怪方法，但在库为这种情况提供更好的处理之前，它对我有用。

--更新--

最初的问题适用于 Foundation 4。看起来 Foundation 5+ 可以更好地处理这种情况:

"To handle the submit event yourself, use data-abide="ajax" instead of data-abide inside the form tag."

<form data-abide="ajax">
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" name="users_name" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <button type="submit">Submit</button>
</form>

$('input[name="users_name"]').on('valid', function() {
  // Handle the submission of the form
});

自 v4 以来我就没有使用过 Abide，因此不知道此更新。