Menu icon Foundation
Initializing Abide based on form class

Hey everybody! Stephen emailed us with this question. Let's help him out!

--

I'm working on a site where we've integrated Foundation 4 and it's working great except for one thing I can't figure out. We have some forms that are built dynamically through a CMS module and we don't have the option to pass in a data element to the form tag. So we can't put "data-abide" on the form tag.

I'm trying to get foundation to initialize Abide on all forms that have a .validate class attached to them, but can't get it to work no matter what I try. I feel like I'm just missing something really obvious.

I realize that if I initialize all of foundation through $(document).foundation() first that I can't later call $(".validate").foundation("abide"). So I've tried putting $(".validate").foundation("abide") before the main foundation initialization. That doesn't work. I also tried setting 'abide','off' first then calling $(".validate").foundation("abide"), but that didn't work either.

So...is there a way to get Abide to run for every form on the site that has a .validate class?

Thanks for your help!
Stephen

abideformsjsjavascriptinitializingvalidate

Hey everybody! Stephen emailed us with this question. Let's help him out!

--

I'm working on a site where we've integrated Foundation 4 and it's working great except for one thing I can't figure out. We have some forms that are built dynamically through a CMS module and we don't have the option to pass in a data element to the form tag. So we can't put "data-abide" on the form tag.

I'm trying to get foundation to initialize Abide on all forms that have a .validate class attached to them, but can't get it to work no matter what I try. I feel like I'm just missing something really obvious.

I realize that if I initialize all of foundation through $(document).foundation() first that I can't later call $(".validate").foundation("abide"). So I've tried putting $(".validate").foundation("abide") before the main foundation initialization. That doesn't work. I also tried setting 'abide','off' first then calling $(".validate").foundation("abide"), but that didn't work either.

So...is there a way to get Abide to run for every form on the site that has a .validate class?

Thanks for your help!
Stephen

Jordan Humphreys almost 6 years ago

What is the CMS module? Abide requires the presence of the data attributes as classes are only used for presentational changes.

Stephen over 5 years ago

Hi Jordan,

I missed this response earlier - sorry about the delayed reply. The CMS module is Low Google Search on ExpressionEngine that hooks into a Google Search Appliance, but there are a number of other modules that create forms without giving us the ability to add in data attributes.

So is there no way to tell Foundation that every form with a class of .validate should initialize the Abide plugin? I'm wondering about this for both Foundation 4 and Foundation 5, since it seems like an obvious thing to do with jQuery.

Jason Varga over 5 years ago

Stephen, I just had the same issue.

I got past it by adding:

$('.validate').attr('data-abide', '');

right before:

$(document).foundation(); 

As long as you add the data-abide attribute to the form before Foundation gets initialized, you'll be good to go.

Stephen over 5 years ago

Thanks Jason. I was trying to call

 $(".validate").foundation("abide");

before initializing Foundation but could never get it to work. Adding the data attribute through JavaScript seems like a good way around this.