Foundation Form in Reveal Modal - Abide Validation Events not firing

Question

I'm working on a login/registration for a simple web app. I'm using Foundation to do so. The index page shows a login screen and a register button, if the user clicks this a Reveal Modal appears which includes the register form. This form uses abide to do the data validation (email address, matching passswords etc.). I want the 'register' submit button to be disabled if there are any validation errors and then not disabled when everything is good.

I have used the code on the Foundation Docs where it says:

$('#myForm')
  .on('invalid.fndtn.abide', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid.fndtn.abide', function () {
    console.log('valid!');
  });

For some reason (that I can't find after much searching) these events aren't firing. My form has the correct ID, my js file is loading correctly (I put console.log messages either side of that jquery code) and I've tried calling:

$(document).foundation('abide','events'); 

as suggested here . But I'm still not getting any events.

Any ideas? Could it be because I've got it in a modal or something?

Thank you for your time.

EDIT: I found this page here which says to add:

$('#your_form_id').foundation({bindings:'events'});

instead of:

$(document).foundation('abide','events'); 

But that doesn't seem to change anything either.

Answer 1

Try using $.getScript after loading the form to run the javascript.

eg:

$('#myModal').foundation('reveal', 'open', {
    url: 'form.html',
    close_on_background_click:true,
    success: function(data) {
        $.getScript( "form.js", function() {}); 
    }
});

Answer 2

I had the same problem with fancybox and ajax check before submit. This is my solution that works for sure

<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....

</form>

<script type="text/javascript" src="..../js/foundation.min.js"></script>

<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>

<script type="text/javascript">

$('#my_form')
    .on('invalid.fndtn.abide', function() {
        console.log('NOT Submitted');
    })
    .on('valid.fndtn.abide', function() {
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxRequest = $.ajax({
            type: 'GET',
            url: "....",
            data: {xxx: yyy},
            cache: false,
            dataType: 'json',
        });

        ....

        ajaxRequest.done(function() {
            if (ok) {
                $('#check_this_field_with_ajax').parent().removeClass('error');
                $('#my_form').attr({'submit_this_form': 'yes'});
                $(document).foundation('abide', 'reflow');
                $('#my_form').trigger('submit.fndtn.abide');
            }
        });
    }

</script>

in foundation.abide.js search line " validate : function (els, e, is_ajax) { " and add:

if (
    is_ajax &&
    form.attr('submit_this_form') === 'yes'
    ) {
    return true;
  }

before

if (is_ajax) {
    return false;
  }