Active tab will default to the tab with the first error present. Tab icons will also be changed to an option called icon_error to let users know there is an error in that tab.

Author: isometriks

Form/Extension/TabbedFormTypeExtension.php

@@ -48,23 +48,36 @@ public function finishView(FormView $view, FormInterface $form, array $options)
             return;
         }
 
-        $found_first = false;
+        $activeTab = null;
+        $tabIndex = 0;
+        $foundInvalid = false;
         $tabs = array();
 
         foreach($view->children as $child) {
             if(in_array('tab', $child->vars['block_prefixes'])) {
-                if (!$found_first) {
-                    $child->vars['tab_active'] = $found_first = true;
+
+                $child->vars['tab_index'] = $tabIndex;
+                $valid = $child->vars['valid'];
+
+                if (($activeTab === null || !$valid) && !$foundInvalid) {
+                    $activeTab = $child;
+                    $foundInvalid = !$valid;
                 }
 
-                $tabs[] = array(
+                $tabs[$tabIndex] = array(
                     'id' => $child->vars['id'],
                     'label' => $child->vars['label'],
                     'icon' => $child->vars['icon'],
+                    'active' => false,
                 );
+
+                $tabIndex++;
             }
         }
 
+        $activeTab->vars['tab_active'] = true;
+        $tabs[$activeTab->vars['tab_index']]['active'] = true;
+
         $tabsForm = $this->formFactory->create(new TabsType(), null, array(
             'tabs' => $tabs,
             'attr' => array(

Form/Type/TabType.php

@@ -13,14 +13,16 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
     {
         $resolver->setDefaults(array(
             'icon' => null,
+            'error_icon' => 'remove-sign',
         ));
     }
 
     public function buildView(FormView $view, FormInterface $form, array $options)
     {
-        $view->vars['icon'] = $options['icon'];
+        $view->vars['valid'] = $valid = !$form->isSubmitted() || $form->isValid();
+        $view->vars['icon'] = $valid ? $options['icon'] : $options['error_icon'];
         $view->vars['tab_active'] = false;
-        
+
         $view->parent->vars['tabbed'] = true;
     }
 

Resources/views/Form/fields.html.twig

@@ -86,7 +86,7 @@
 {% spaceless %}
 <ul class="{{ form.vars.attr.class }}">
     {% for tab in form.vars.tabs %}
-        <li{% if loop.first %} class="active"{% endif %}>
+        <li{% if tab.active %} class="active"{% endif %}>
             <a data-toggle="tab" href="#{{ tab.id }}">
                 {% if tab.icon %}<i class="icon-{{ tab.icon }}"></i>{% endif %}
                 {{ tab.label }}
@@ -487,7 +487,7 @@
         {% set data_prototype = 'collection' in form.vars.block_prefixes and not omit_collection_item ? '<div class="collection-item ' ~ widget_items_attr.class|default()|join(' ') ~ '" id="' ~ prototype.vars.id ~ '_control_group">' ~ form_row(prototype) ~ '</div>' : form_row(prototype) %}
         {% set data_prototype_name = form.vars.form.vars.prototype.vars.name|default('__name__') %}
         {% set widget_form_group_attr = widget_form_group_attr|merge({'data-prototype': data_prototype, 'data-prototype-name': data_prototype_name})|merge(attr) %}
-    {% endif %}    
+    {% endif %}
     {% set widget_form_group_attr = widget_form_group_attr|merge({'id': id ~ '_control_group', 'class': widget_form_group_attr.class|default('') ~ ' ' ~ row_wrapper_class}) %}
     {% if errors|length > 0 %}
         {% set widget_form_group_attr = widget_form_group_attr|merge({'class': widget_form_group_attr.class|default('') ~ ' error'}) %}