Foundation-sites: [Abide] [F6.1.1] Validation doesn't work with dynamically loaded elements

Created on 10 Jan 2016  ·  3Comments  ·  Source: foundation/foundation-sites

Abide doesn't validate dynamically loaded inputs. Here is example with custom form, dynamically loaded form and Reveal modal with data-reset-on-close="true".

https://jsfiddle.net/sxudkx2n/4/

javascript

Most helpful comment

Both of these methods will initialize abide if you dynamically add a new form, but if you add new fields inside an existing form, none of them works. If you run foundation in a form with existing abide you will get a warning from foundation. And if you destroy foundation in this form and rerun it, nothing changes.
If you add new fields in a form with abide, you just have to run Foundation.reInit('abide') to inform foundation about the new items.
If this is by design it's ok, but I would prefer a way to reInit abide on a certain form after adding new content in it.

All 3 comments

This is not a bug, and it certainly does work with dynamically loaded content, you just need to inform Foundation that you added something. $(document).foundation(); initializes plugins on the page at the time that function is executed, if you add something new to the page, whether by ajax or the modal reloading content, you need to let Foundation know that.
The $.fn.foundation does not set a watch task or anything to check for new content being loaded, the overhead for that would be prohibitively costly, and page performance would suffer.
In summation, if you're loading via AJAX, do this:

$.ajax(..., function(someContent){
  $('body').append(someContent);
// add this line ⌄
  $(someContent).foundation();
});

Similarly, taking advantage of the event emitters in Foundation, for your modal you could do:

$('.modal-class').on('open.zf.reveal', function(){
  $(this).foundation();
});

Both of these methods will initialize any plugins that haven't been registered with Foundation, contained within their respective elements.

Both of these methods will initialize abide if you dynamically add a new form, but if you add new fields inside an existing form, none of them works. If you run foundation in a form with existing abide you will get a warning from foundation. And if you destroy foundation in this form and rerun it, nothing changes.
If you add new fields in a form with abide, you just have to run Foundation.reInit('abide') to inform foundation about the new items.
If this is by design it's ok, but I would prefer a way to reInit abide on a certain form after adding new content in it.

@grapto Thank you sir, this is what i was loooking for:

Foundation.reInit('abide')

Must be run after dynamically adding new elements to a form that require validation.

Was this page helpful?
0 / 5 - 0 ratings