I am trying to use Foundation 6.6 Abide to validate a form and if the form is valid, I DO NOT want it to submit - but rather trigger another another event. Whatever I do - the form always seem to submit.
<form data-abide novalidate id="contactForm" >
...
<input type="submit" value="Next " id="goToBillingAddressTab"/>
</form>
I have added this code - but it always submits.
// 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
});
I have also tried this - but it still submits:
$('#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;
});
SOLUTION!
I was using the "DOWNLOAD VERSION" of Foundation 6.6.1. That is where the bug creeps in somewhere.
If I use the CDNS: https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.1/js/foundation.min.js
Then it works as it should