Show automatically the tab where there is an error when submitting the form (dynamic tabs)

• Type: Technical Task
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: None
• Fix Version/s: 6.2.0 CE M4
• Component/s: Dev Tools, UI Taglibs
• Labels: None
• Epic/Theme:
  • LPRE
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/8587

Liferay tabs can be used dynamically (when the user clicks in a tab we don't refresh the whole page, we just show or hide some sections) with the following code (refresh parameter):

<liferay-ui:tabs
formName="fm"
names="asset-selection,display-settings"
param="tabs2"
refresh="<%= false %>"
>
<liferay-ui:section>
</liferay-ui:section>
<liferay-ui:section>
</liferay-ui:section>
</liferay-ui:tabs>

Then, if there is an error in the second tab but the user submitted the form from the first tab, he won't be redirected to the tab where the error is, so he will be confused about where he should fix the error.

In case there is an error in any tab, the user should be automatically redirected to that tab so the user can see the error and fix it.

The proposal of this ticket is to use the following taglib to support this: liferay-ui:error-marker

Then, we need to use this taglib inside the different sections and when there is an error the user will be redirected automatically to the section where the error is:

<liferay-ui:tabs
formName="fm"
names="asset-selection,display-settings"
param="tabs2"
refresh="<%= false %>"
>
<liferay-ui:section>
<liferay-ui:error-marker key="errorSection" value="asset-selection" />
</liferay-ui:section>
<liferay-ui:section>
<liferay-ui:error-marker key="errorSection" value="display-settings" />
</liferay-ui:section>
</liferay-ui:tabs>