Tabbed Fieldsets/Inlines - Highlight tab button with errors

[nattyg93]

Hi folks,

Love this package and loving the tabbed fieldsets & inlines.

One issue we have encountered is that if there are errors in a different tab, it is very tricky to know where the error is.

Would it be possible to add a class (and styling) to highlight the tab with errors in red?

[fabiocaccamo]

@nattyg93 thank you for this suggestion, it seems very useful.

[PevznerDanill]

can anyone duplicate here the suggestion of @nattyg93 mentioned earlier?

[EricPobot]

I managed to implemented it the following way :

• override the admin/change_form.html template
• add the following to it :

{% block extrastyle %}
    {{ block.super }}
      .tabbed-changeform-tablink.error {
          color: red !important;
      }
{% endblock %}

{% block footer %}
    {{ block.super }}
    <script>
        document.querySelectorAll(".errors").forEach((elt) => {
            const tabContent = elt.closest(".tabbed-changeform-tabcontent");
            if (tabContent) {
                const tabName = tabContent.id.replace("tabcontent-", "");
                const tabElt = document.getElementById(`tablink-${tabName}`);
                if (tabElt) {
                    tabElt.classList.add('error');
                }
            }
        });
    </script>
{% endblock %}

It works in a quite straightforward way, by looking for tabs containing fields flagged with errors and then styling the tab button with the matching name accordingly. Having several errors in the same tab does not harm since classList.add() doesn't create duplicates.

As for as I could use this snippet, it seems to work fine without any noticeable side-effect.

Feel free to adapt and integrate it in a future version.

[fabiocaccamo]

@EricPobot thank you very much for sharing your solution!

[EricPobot]

I've done a couple of adaptations to the change template for a better support of form rows with multiple fields and associated errors display (among other details).

Since I've not done any extensive testing outside the presentation goals I was aiming, I can't be sure they don't break something. Would you be interested in me sharing them too ?

[fabiocaccamo]

@EricPobot indeed!