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
- Fix #8659: TabView/Accordion add ui-state-error — committed to melloware/primefaces by melloware 2 years ago
- Fix #8659: TabView/Accordion add ui-state-error — committed to melloware/primefaces by melloware 2 years ago
- Fix #8659: TabView/Accordion add ui-state-error (#8660) * Fix #8659: TabView/Accordion add ui-state-error * Fix #8659: TabView/Accordion add ui-state-error — committed to primefaces/primefaces by melloware 2 years ago
@melloware Created ticket #9054 for the
focusOnErrorfeature.@melloware Indeed, that’s one of the reasons why I had
ui-message-error-detailin 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