Question

我正在为一个简单的网络应用程序登录/注册。我正在使用基金会这样做。索引页面显示登录屏幕和注册按钮，如果用户单击此按钮，则会显示包含注册表单的显示模式。此表单使用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文件正确加载（我在那个jquery代码的任一侧放了console.log消息）我试过调用：

$(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;
  }

显示模态中的基础表格 - 遵守验证事件未触发

2 个答案: