Select form first tab with errors on load / submit

Resources/public/base.js

@@ -5,6 +5,7 @@ jQuery(document).ready(function() {
     Admin.set_object_field_value(document);
     Admin.setup_collection_buttons(document);
     Admin.setup_per_page_switcher(document);
+    Admin.setup_form_tabs_for_errors(document);
 });
 
 var Admin = {
@@ -165,5 +166,47 @@ var Admin = {
 
             window.top.location.href=this.options[this.selectedIndex].value;
         });
+    },
+
+    setup_form_tabs_for_errors: function(subject) {
+        // Switch to first tab with server side validation errors on page load
+        jQuery('form', subject).each(function() {
+            Admin.show_form_first_tab_with_errors(jQuery(this), '.sonata-ba-field-error');
+        });
+
+        // Switch to first tab with HTML5 errors on form submit
+        jQuery(subject)
+            .on('click', 'form [type="submit"]', function() {
+                Admin.show_form_first_tab_with_errors(jQuery(this).closest('form'), ':invalid');
+            })
+            .on('keypress', 'form [type="text"]', function(e) {
+                if (13 === e.which) {
+                    Admin.show_form_first_tab_with_errors(jQuery(this), ':invalid');
+                }
+            })
+        ;
+    },
+
+    show_form_first_tab_with_errors: function(form, errorSelector) {
+        var tabs = form.find('.nav-tabs a'),
+            firstTabWithErrors;
+
+        tabs.each(function() {
+            var id = jQuery(this).attr('href'),
+                tab = jQuery(this),
+                icon = tab.find('.has-errors');
+
+            if (jQuery(id).find(errorSelector).length > 0) {
+                // Only show first tab with errors
+                if (!firstTabWithErrors) {
+                    tab.tab('show');
+                    firstTabWithErrors = tab;
+                }
+
+                icon.removeClass('hide');
+            } else {
+                icon.addClass('hide');
+            }
+        });
     }
 }

Resources/views/CRUD/base_edit_form.html.twig

@@ -17,7 +17,12 @@
                 <div class="tabbable">
                     <ul class="nav nav-tabs">
                         {% for name, form_group in admin.formgroups %}
-                            <li class="{% if loop.first %}active{% endif %}"><a href="#{{ admin.uniqid }}_{{ name|sonata_slugify }}" data-toggle="tab">{{ admin.trans(name) }}</a></li>
+                            <li class="{% if loop.first %}active{% endif %}">
+                                <a href="#{{ admin.uniqid }}_{{ name|sonata_slugify }}" data-toggle="tab">
+                                    <i class="icon-exclamation-sign has-errors hide"></i>
+                                    {{ admin.trans(name) }}
+                                </a>
+                            </li>
                         {% endfor %}
                     </ul>
             {% endblock %}