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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.