Base's Endure verification and tabs

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.

Here is an example of some code:

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

View it live here: http://jsfiddle.net/1ukfgwqt/ (avoid clicking the second tab before clicking Submit).

Is there another method, besides reverting to 5.5.1 or manually editing Foundation's JS files, to enable validation for hidden fields or correct validation for inactive tabs (pending the resolution of the issue I raised)?

Answer №1

Dealing with a similar problem, I approached it by implementing a callback on the tabs and reflowing in the following manner:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating modules or classes in ExpressJS

I am in the process of defining a modules/class that will contain a list of methods. Each method will have an instance of a service such as loggers, promises, etc. What is the best way to ensure clean code while implementing this? Currently, my code incl ...

Issue with rendering Html Element on FireFox compared to Chrome

Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good. Css .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); wi ...

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...

JSON data being sent through an AJAX request

Currently, I am developing a chat system that automatically refreshes using AJAX. Initially, I utilized the jQuery $.post function which worked fine for my needs. However, since I required JSON data from my PHP script, I switched to using the $.ajax functi ...

The output for each function is consistently the same for every record

Implementing a foreach loop to send data and display it in the success function of an AJAX call is functioning smoothly. Recently, I made a modification to the code by introducing a new data-attribute which contains the $creator variable. Here's how ...

Video tag with centered image

For a current project, I am in need of rendering a centered image (a play button) at runtime on top of a video based on the UserAgent. If the userAgent is not Firefox, I want to display the image as Firefox has its own playEvent and button on top of the vi ...

What is the best way to elevate a child component's state to the parent component in order to pass it down as props?

Currently, I am utilizing react-dnd and most of their internal functions require the component parameter in order to determine various aspects of the component. For instance, Component allows us to reference the component itself, enabling actions such as g ...

What methods can a server use to identify if JQuery Ajax's "withCredentials: true" option was utilized for CORS requests?

Currently, I am working on integrating CORS (Cross-origin resource sharing) into a framework. I understand that when an XMLHttpRequest request is made using Jquery's ajax(...) with the withCredentials property set to true, the server must specificall ...

Enrich your HTML using AngularJS

CSS <div class="container"> <section> <p>{{content}}</p> </section> </div> script.js (function () { var script = function ($scope){ $scope.content = "example"; } }()); I am currently ...

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

When using AngularJS 1.3, it is necessary to include the <base> tag in HTML5 mode. This led me to consider the pros and cons of HTML5 mode versus Hash mode. In Hash mode, the major drawback is that URLs can appear unattractive and may not be easy fo ...

I'm only appending the final element to the JavaScript array

Currently, I have the following code: I'm endeavoring to create a new JSON object named dataJSON by utilizing properties from the GAJSON object. However, my issue arises when attempting to iterate over the GAJSOn object; only its last element is added ...

What steps should I take to ensure that the child menus of the v-navigation-drawer component are activated during the initial project launch?

I have created a v-navigation-drawer component with Vue 3 and Vuetify 3. The v-navigation-drawer functions properly, but I want the child menus to be visible by default without requiring the user's click when the project first launches. I am using v- ...

Automatically load content using AJAX when scrolling within a HTML5 segment

Recently, I've been developing a website that dynamically loads new content from a MySQL database as the user scrolls. However, I've encountered an issue where the new content is loaded even with minimal scrolling, rather than only when reaching ...

What benefits can be gained from utilizing the beforeEach function within Jest testing?

I am currently immersing myself in the world of Jest by following this informative guide. Can you explain the benefits of utilizing the beforeEach function in Jest? I have a particular interest in identifying action dispatches. I believe that two segments ...

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the he ...

Create a custom element in React to detect and encapsulate links

I could really use some assistance with this issue. I have a bunch of text blocks containing links and have been utilizing linkifyjs's React component to automatically wrap the links in anchor tags. However, now I am looking to add a custom button nex ...

Troubleshooting JavaScript within Embedded Resources

Looking for the most effective method of debugging JavaScript in Visual Studio when dealing with embedded resource files? Due to the fact that JavaScript is compiled into a library, setting breakpoints directly on the source file may not yield desired res ...

Is there a way to prevent SignalR from disconnecting when the settings window is moved?

I am currently developing a webpage that utilizes SignalR events to trigger ajax requests to our servers. These requests return a URL with a custom URI scheme that, when accessed, opens up a specific program on the client's device without leaving the ...

Changing HTML elements dynamically within an ng-repeat using AngularJS directives

I have devised an angular directive where I execute an ng-repeat. The fundamental purpose of this directive is to interchange itself with a distinct directive that depends on a value forwarded into the original directive: <content-type-directive type=" ...

Tips for preventing HTTP Status 415 when sending an ajax request to the server

I am struggling with an AJAX call that should be returning a JSON document function fetchData() { $.ajax({ url: '/x', type: 'GET', data: "json", success: function (data) { // code is miss ...