Foundation's Abide validation and tabs

Question

Abide from version 5.5.2 does not validate hidden fields. However, that also means that the validation does not work for fields in inactive tabs.

Sample code could be:

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

Live here: http://jsfiddle.net/1ukfgwqt/ (don't click the second tab before clicking Submit).

Is there a way, other than downgrading to 5.5.1 or manually editing Foundation's JS files, to reenable validation for hidden fields or fix validation for inactive tabs (until the issue I reported is fixed)?

Answer 1

I have the same issue. my solution was to have a callback on the tabs and reflows abide like this :

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