javascript - Foundation 的 Abide 验证和选项卡

Question

遵守版本 5.5.2 不会验证隐藏字段。但是，这也意味着验证不适用于非活动选项卡中的字段。

示例代码可以是：

<form data-abide>
    <ul class="tabs" data-tab>
      <li class="tab-title active"><a href="#panel1">Tab Name</a></li>
      <li class="tab-title"><a href="#panel2">Tab Email</a></li>
    </ul>
    <div class="tabs-content">
      <div class="content active" id="panel1">
          <div class="name-field">
            <label>Your name <small>required</small>
              <input type="text" required pattern="[a-zA-Z]+">
            </label>
            <small class="error">Name is required and must be a string.</small>
          </div>
      </div>
      <div class="content" id="panel2">
          <div class="email-field">
            <label>Email <small>required</small>
              <input type="email" required>
            </label>
            <small class="error">An email address is required.</small>
          </div>
      </div>
    </div>
  <button type="submit">Submit</button>
</form>

<script>
    $(document).foundation();
</script>

住在这里：http: //jsfiddle.net/1ukfgwqt/（在点击提交之前不要点击第二个标签）。

除了降级到 5.5.1 或手动编辑 Foundation 的 JS 文件之外，是否有其他方法可以重新启用对隐藏字段的验证或修复对非活动选项卡的验证（直到我报告的问题得到修复）？

Answer 1

我有同样的问题。我的解决方案是在标签和回流上进行回调，如下所示：

    $(document).foundation({
        tab: {
            callback: function (tab) {
                $(document).foundation('abide', 'reflow');
            }
        }
    });