Issue #2512306 by StryKaizer, bojanz, googletorp, JeroenT, borisson_,...

Issue #2512306 by StryKaizer, bojanz, googletorp, JeroenT, borisson_, tim.plunkett: Inline errors not shown for details elements

core/includes/form.inc

@@ -257,6 +257,12 @@ function template_preprocess_details(&$variables) {
   $variables['description'] = (!empty($element['#description'])) ? $element['#description'] : '';
   $variables['children'] = (isset($element['#children'])) ? $element['#children'] : '';
   $variables['value'] = (isset($element['#value'])) ? $element['#value'] : '';
+
+  // Display any error messages.
+  $variables['errors'] = NULL;
+  if (!empty($element['#errors']) && empty($element['#error_no_message'])) {
+    $variables['errors'] = $element['#errors'];
+  }
 }
 
 /**

core/modules/system/src/Tests/Form/ElementTest.php

@@ -160,4 +160,12 @@ public function testFormAutocomplete() {
     $this->assertEqual(count($result), 1, 'Ensure that the user does have access to the autocompletion');
   }
 
+  /**
+   * Tests form element error messages.
+   */
+  public function testFormElementErrors() {
+    $this->drupalPostForm('form_test/details-form', [], 'Submit');
+    $this->assertText('I am an error on the details element.');
+  }
+
 }

core/modules/system/templates/details.html.twig

@@ -5,6 +5,7 @@
  *
  * Available variables
  * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
  * - title: (optional) The title of the element, may not be set.
  * - description: (optional) The description of the element, may not be set.
  * - children: (optional) The children of the element, may not be set.
@@ -20,6 +21,12 @@
     <summary{{ summary_attributes }}>{{ title }}</summary>
   {%- endif -%}
 
+  {% if errors %}
+    <div>
+      {{ errors }}
+    </div>
+  {% endif %}
+
   {{ description }}
   {{ children }}
   {{ value }}

core/modules/system/tests/modules/form_test/form_test.routing.yml

@@ -402,6 +402,14 @@ form_test.button_class:
   requirements:
     _access: 'TRUE'
 
+form_test.details_form:
+  path: '/form_test/details-form'
+  defaults:
+    _form: '\Drupal\form_test\Form\FormTestDetailsForm'
+    _title: 'Form details form test'
+  requirements:
+    _access: 'TRUE'
+
 form_test.description_display:
   path: '/form_test/form-descriptions'
   defaults:

core/modules/system/tests/modules/form_test/src/Form/FormTestDetailsForm.php

+<?php
+
+/**
+ * @file
+ * Contains \Drupal\form_test\Form\FormTestGroupContainerForm.
+ */
+
+namespace Drupal\form_test\Form;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Builds a simple form to test the #group property on #type 'container'.
+ */
+class FormTestDetailsForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'form_test_details_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['meta'] = [
+      '#type' => 'details',
+      '#title' => 'Details element',
+      '#open' => TRUE,
+    ];
+    $form['submit'] = ['#type' => 'submit', '#value' => 'Submit'];
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    $form_state->setErrorByName('meta', 'I am an error on the details element.');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+  }
+
+}

core/themes/classy/templates/form/details.html.twig

@@ -5,6 +5,7 @@
  *
  * Available variables
  * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
  * - title: (optional) The title of the element, may not be set.
  * - description: (optional) The description of the element, may not be set.
  * - children: (optional) The children of the element, may not be set.
@@ -18,6 +19,11 @@
     <summary{{ summary_attributes }}>{{ title }}</summary>
   {%- endif -%}
   <div class="details-wrapper">
+    {% if errors %}
+      <div class="form-item--error-message">
+        <strong>{{ errors }}</strong>
+      </div>
+    {% endif %}
     {%- if description -%}
       <div class="details-description">{{ description }}</div>
     {%- endif -%}