Switching Tabs on Validation

Need Help
,
#1

Got a question about validation in the frontend. Right now, I have a custom dashboard that I built that has validation working on it. no issues there.

My issue is that I need a way to switch tabs when the field in question doesn’t meet specifications. For example. Field A is under Tab B. I’m on Tab C currently. The validation kicks in on Tab A saying that it needs filled, but it’s not switching.

I know October does it in the backend, and I have some ways of doing it. I’d like some feedback on how to do it the “October” way with AJAX functions.

#2

October CMS does it like this in the backend panel:

addEventListener('ajax:invalid-field', function(event) {
    const { element, fieldName, errorMsg, isFirst } = event.detail;

    if (!isFirst) {
        return;
    }

    event.preventDefault();

    // ... Find the tab from element and make it active ... 

    element.focus();
});
1 Like
#3

One last question. Does that exist in the frontend as well?

#4

Not by default, the frontend is BYOT (bring your own tools/tech). However, you can implement this same code in the frontend. The only missing link is your tab implementation.

For example, this is how Bootstrap tabs recommend showing a tab programmatically:

var firstTabEl = document.querySelector('#myTab li:last-child a')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()

You need to write code to go from the invalid field element to the tab element… Something like this – sorry I haven’t tested it!

// Vanilla JS
var pane = element.closest('.tab-pane'),
    container = document.querySelector('#mytabs'),
    tab = pane && container && container.querySelector('[data-target="' + pane.id + '"]');


if (tab) {
    new bootstrap.Tab(tab).show();
}


// jQuery
var container = $('#mytabs');
var pane = $(element).closest('.tab-pane')

var id = '#' + pane.attr('id'),
    tab = $('[data-target="' + id + '"]', container);

tab.tab('show');
#5

looks like that was the bit I needed! thank you.


addEventListener('ajax:invalid-field', function (event) {
            const { element, fieldName, errorMsg, isFirst } = event.detail;

            if (!isFirst) {
                return;
            }

            event.preventDefault();

            var pane = element.closest('.tab-pane'),
                container = document.querySelector('#edit_rental_tabs'),
                tab = pane && container && container.querySelector('[data-bs-target="#' + pane.id + '"]');

            if (tab) {
                new bootstrap.Tab(tab).show();
            }

            element.focus();
        });
1 Like