primefaces: TabView/AccordionPanel: error indication

When you have a TabView with multiple tabs on which validation can fail, it is really handy that the tabs on which errors occur, get an error highlighting. For this, we use the following Javascript within our project:

function markInvalidTabs(id) {
    id = PrimeFaces.escapeClientId(id);
    let c = $(id + '>ul>li');
    c.each(function () {
        let d = $('a', this);
        let tid = d.attr('href').substring(1);
        tid = PrimeFaces.escapeClientId(tid);
        let uiStateErrorElements = $(tid + ' .ui-state-error');
        let uiMessageErrorDetailElements = $(tid + ' .ui-message-error-detail');
        if (uiStateErrorElements.length + uiMessageErrorDetailElements.length > 0) {
            $(this).addClass('ui-state-error');
        } else {
            $(this).removeClass('ui-state-error');
        }
    });
}

and hence we call this method after an AJAX update, with id the TabView identifier. It would be cool if this would be the default behavior of TabView.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 25 (16 by maintainers)

Commits related to this issue

Most upvoted comments

@melloware Created ticket #9054 for the focusOnError feature.

@melloware Indeed, that’s one of the reasons why I had ui-message-error-detail in the original code. Maybe this could be added again? Won’t hurt I guess…

Tested out 12.0.0-SNAPSHOT against our app. Tab error indications work as expected.

Yep I will submit a PR