Abide - validate certain parts of form only

Hi,

I have a long form that is split into different parts - Eg:

  • Contact Details
  • Address Details
  • Shipping Details

I have Adibe working on the entire form. (as a test)

However I would like to validate each part separately - in other words the Contact details would have to validate first before the next section is shown.

I can’t seem to get Adibe to ONLY validate certain inputs at a time.

When I use:

$("#goToBillingAddressTab").on(“click”, function(){

$("#deliveryForm").foundation(‘validateInput’, element);

I get a “TypeError: $(…).foundation is not a function” error?

Any advice would be appreciated. (I’m still a newbie and not that great with javascript)

Please check if foundation.js is inistialized and loaded. Also from where did you get this function call for validating fields in Foundation 6?

Hi Daniel,

The file ‘foundation.js’ is no longer in 6.6 - now only app.js exists - I am under the impression that foundation.js in included in the app.js file?

I found that function in the javascript reference on this page:
https://get.foundation/sites/docs/abide.html

I think you speak about a specific starter template. foundation.js is still available in the packages meant for development (npmjs).

Hi there - I am trying an alternate route - but I need to stop the form from submitting if validation successful.

I have tried this but it still seems to submit:

$(’#contactForm’).on(“submit”, function(ev) {
ev.preventDefault();
console.log(“Submit for form intercepted”);
});

And this

$(’#contactForm’).on(“formvalid.zf.abide”, function(ev,frm) {
ev.preventDefault();
console.log(“Submit for form intercepted”);
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

This topic here is a crosspost of https://github.com/foundation/foundation-sites/issues/12009

Please take a look at my reply and keep the communication at one place.

1 Like

Same at https://stackoverflow.com/questions/60353859/how-to-prevent-submit-button-submitting-a-form-using-foundation-6-6-and-abide