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!

[fabiocaccamo]

@EricPobot I think this could be easily achieved using CSS :has() selector only.

[EricPobot]

@fabiocaccamo I'm not sure to understand what you are referring to exactly. Could you elaborate please ?

[fabiocaccamo]

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.

I was referring to your solution, but looking closer at the html code it is not possible to do it using the :has() CSS selector only.

[EricPobot]

Thanks for the clarification. At the end of the day, my proposal seems still valid if I understand correctly your very last message. Am I right ?

[fabiocaccamo]

@EricPobot yes it seems valid to me, I'll try to implement it tomorrow.