显示模式-遵守验证事件不触发中的基础窗体

Question

我正在为一个简单的web应用程序进行登录/注册。我正在使用Foundation来做到这一点。索引页面显示一个登录屏幕和一个注册按钮，如果用户单击此按钮，将显示包含注册表单的显示模式。此表单使用abide进行数据验证(电子邮件地址、匹配密码等)。我希望‘注册’提交按钮被禁用，如果有任何验证错误，然后不禁用时，一切都很好。

我在Foundation Docs上使用了代码，代码如下：

$('#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!');
  });

由于某些原因(我搜索了很久也找不到)，这些事件不会触发。我的表单具有正确的ID，我的js文件加载正确(我将console.log消息放在jquery代码的两侧)，并且我尝试调用：

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

如建议的here。但我还是没有收到任何事件。

有什么想法吗？会不会是因为我把它放在了一个模版里呢？

谢谢您抽时间见我。

编辑:我找到了这个页面的here，上面写着添加：

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

而不是：

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

但这似乎也不会改变任何事情。

Answer 1

在加载表单后尝试使用$.getScript来运行javascript。

例如：

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

Answer 2

我在提交之前使用fancybox和ajax检查时也遇到了同样的问题。这是我的解决方案，肯定有效

<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>

在foundation.abide.js中搜索行"validate : function (els, e, is_ajax) {“并添加：

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

在此之前

if (is_ajax) {
    return false;
  }