如何使用 Foundation 6.6 和 Abide 防止提交按钮提交表单答案

【问题标题】：How to prevent submit button submitting a form using Foundation 6.6 and Abide如何使用 Foundation 6.6 和 Abide 防止提交按钮提交表单
【发布时间】：2020-06-06 18:44:49
【问题描述】：

我正在尝试使用 Foundation 6.6 Abide 来验证表单，如果表单有效，我不希望它提交 - 而是触发另一个事件。无论我做什么 - 表单似乎总是提交。

<form data-abide novalidate id="contactForm" >
  ...
  <input type="submit" value="Next " id="goToBillingAddressTab"/>
</form>

我已添加此代码 - 但它总是提交。

// script to prevent form from submitting 
$('#contactForm').on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submit for form intercepted");
      return false;
  });

// script to trigger other events 
    $('#contactForm').on("formvalid.zf.abide", function(ev,frm) {
      console.log("Form is valid");
      ev.preventDefault(); // also added prevent submit here
      // perform other tasks here

      return false; // and another version of prevent submit
  });

我也试过这个 - 但它仍然提交：

  $('#contactForm').on("submit", function(ev) {
  ev.stopPropagation();
  ev.stopImmediatePropagation();
  ev.preventDefault();
  console.log("Submit for form intercepted");
  return false;
});


$('#contactForm').on("formvalid.zf.abide", function(ev) {
console.log("Form is valid");
    ev.stopPropagation();
    ev.stopImmediatePropagation();
    ev.preventDefault();
    // perform other task

    return false;
});

【问题讨论】：

事件绑定在提交按钮上，您可能需要 stopPropagation 和 stopImmediatePropagation。 github.com/foundation/foundation-sites/blob/v6.6.1/js/…
感谢您的回复 - 但它仍然提交..
也许检查每个输入的验证，然后使您的按钮可点击。

标签： forms zurb-foundation abide

【解决方案1】：

解决方案！

我使用的是 Foundation 6.6.1 的“下载版本”。这就是错误在某处蔓延的地方。

如果我使用 CDNS： https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/foundation.min.js

然后它就可以正常工作了

【讨论】：