preventDefault无法使用Zurb验证(Abide)

Question

我在我的网站上使用zurb基金会.它已经得到了自己的验证.这是文档的链接.

我使用以下代码来验证和提交表单数据.

$('#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

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

这并不会阻止"无效"事件执行AJAX,因为"有效"和"无效"都由"提交"触发.结果是上面的函数被"submit"调用,即使表单无效,也会进行AJAX调用.

通过一个小的修改,该代码可以工作:

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

这是围绕Abide验证事件的一种hacky方式,但它对我有用,直到库为这种情况提供更好的处理.

--UPDATE--

最初的问题适用于基金会4.看起来基金会5+更好地处理这个场景:

"要自己处理提交事件,请在表单标记内使用data-abide ="ajax"而不是数据."

<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,所以不知道这个更新.