Jquery preventDefault不使用Zurb验证（遵守） 我在网站上使用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

    });

---

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

您可以使用g.stopPropagation（）和g.preventDefault（）。这可能会帮你解决问题

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

    //ajax call to insert the data

});

---

打开基础.abID.js文件

转到验证方法/函数

---

然后在最后一行，将“return true；”更改为“return false；”

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

这不会阻止“invalid”事件执行AJAX，因为“valid”和“invalid”都是由“submit”触发的。结果是上面的函数被“submit”调用，即使表单无效，也会进行AJAX调用

只要稍加修改，该代码就可以工作：

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

这是一种绕过遵守验证事件的黑客方法，但在库为该场景提供更好的处理之前，它对我来说是有效的

--更新--

最初的问题适用于基金会4。看起来基础5 +处理这个场景要好得多：

“要自己处理提交事件，请在表单标记中使用data-beford=“ajax”而不是data-beford。”

---

我从v4开始就没有使用过Equide，因此不知道有此更新。

我发现这种方法更干净：

$('#myForm').on({
    'submit': function(){
        // will prevent browser-submitting the form in any any case:
        return false;
    },
    'valid': function(){
        // bind to abide's event and only care about submitting the stuff AJAX'ly
        $(this).ajaxSubmit({
            // ...
        });
    }
});

---

为基础5，当使用数据时，尝试使用Ajax调用，不要担心预防错误（）；只需使用下面的data=“ajax”

HTML

简单易行

---

参考-

这不会阻止“无效”事件执行AJAX，因为“有效”和“无效”都是由“提交”触发的。结果是上面的函数被“submit”调用，即使表单无效，也会进行AJAX调用。我将“valid”改为“submit”，以启动Ajax提交。@Jusfeel您的意思是将事件类型测试改为

g.type==“submit”

？乍一看，这与另一个答案相同，在这个答案中，无效表单仍然可以发送AJAX提交（因为“提交”不一定是“有效的”。您能否澄清为什么要测试“提交”而不是“有效的”？是的。我在示例中使用了“提交”而不是“有效的”。这是因为“有效”不起作用，但“提交”起作用。

$('#myForm').on({
    'submit': function(){
        // will prevent browser-submitting the form in any any case:
        return false;
    },
    'valid': function(){
        // bind to abide's event and only care about submitting the stuff AJAX'ly
        $(this).ajaxSubmit({
            // ...
        });
    }
});

<form data-abide="ajax" id="myform">
  <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>

$('#myForm')
  .on('invalid.fndtn.abide', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid.fndtn.abide', function () {
    console.log('valid!');
  });