Setting tab 'error' class for tab with error

Question

When creating an editor interface within my plugin, I am using the following snippet to create a set of tabs inside a tab pane:

{% include "_includes/tabs" with {
   tabA: { label: 'Tab A'|t, url: '#tabA' },
   tabB: { label: 'Tab B'|t, url: '#tabB' },
} %}

<div id="tabA"></div>
<div id="tabB"></div>

Now, when I submit my editor form and there is an error in a form field that's part of tabB, I want to indicate this by highlighting the tab title in red. This is usually done by adding the class 'error' to the tab. So, using Twig, I could determine which tabs have errors right before defining the actual tabs and apply the class 'error' to the relevant tabs. I could also apply the 'error' class using JavaScript upon form initialization.

Just wondering what the recommended way of doing this is or whether there is some built-in code to easily do this?

Answer 1

I don't believe there is any 'built in code' you could use.

You have 2 options though.

You could either do this in twig by checking all fields in a tab and adding an error class to the tab:

{% set actionClasses = "" %}
{% if (sale.getErrors('discountAmount') or sale.getErrors('discountType')) %}
    {% set actionClasses = "error" %}
{% endif %}

{% set saleClasses = "" %}
{% if(sale.getErrors('name')) %}
    {% set saleClasses = "error" %}
{% endif %}

{% set tabs = {
    0: {'label':'Sale'|t,'url':'#sale','class': saleClasses},
    1: {'label':'Conditions'|t,'url':'#conditions'},
    2: {'label':'Actions'|t,'url':'#actions','class': actionClasses}
} %}

Or you could pre build the 'tabs' variable in the controller and add the errors there:

if ($variables['account']->hasErrors())
{
    // Add the 'error' class to any tabs that have errors
    $errors = $variables['account']->getErrors();
    $accountFields = array('username', 'firstName', 'lastName', 'email', 'password', 'newPassword', 'currentPassword', 'passwordResetRequired', 'preferredLocale');

    foreach ($errors as $attribute => $error)
    {
        if (isset($variables['tabs']['account']) && in_array($attribute, $accountFields))
        {
            $variables['tabs']['account']['class'] = 'error';
        }
        else if (isset($variables['tabs']['profile']))
        {
            $variables['tabs']['profile']['class'] = 'error';
        }
    }
}

Hope that helps.