javascript - Foundation's Abide validation and tabs -
abide version 5.5.2 not validate hidden fields. however, means validation not work fields in inactive tabs.
sample code 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 required , must 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 required.</small> </div> </div> </div> <button type="submit">submit</button> </form> <script> $(document).foundation(); </script>
live here: http://jsfiddle.net/1ukfgwqt/ (don't click second tab before clicking submit).
is there way, other downgrading 5.5.1 or manually editing foundation's js files, reenable validation hidden fields or fix validation inactive tabs (until issue reported fixed)?
i have same issue. solution have callback on tabs , reflows abide :
$(document).foundation({ tab: { callback: function (tab) { $(document).foundation('abide', 'reflow'); } } });
Comments
Post a Comment