[Backoffice] Style form errors.

Closes #95
Clastic · Apr 9, 2015 · 0959793 · 0959793
1 parent 0ad70b0
commit 0959793
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/Clastic/BackofficeBundle/Resources/public/scripts/form.parsley.js b/src/Clastic/BackofficeBundle/Resources/public/scripts/form.parsley.js
@@ -7,11 +7,22 @@
             return;
         }
 
-        $form.parsley();
+        $form.parsley({
+            errorClass: 'has-error',
+            classHandler: function(ParsleyField) {
+                return ParsleyField.$element.parents('.form-group');
+            },
+            errorsContainer: function(ParsleyField) {
+                return ParsleyField.$element.parents('.form-group');
+            },
+            errorsWrapper: '<span class="bg-danger help-block">',
+            errorTemplate: '<div></div>'
+        });
+
         $.listen('parsley:form:validated', function() {
-            var $tabpanel = $form.find('.tabpanel');
-            if ($tabpanel.length) {
-                var $firstError = $tabpanel.find('.parsley-error').first();
+            var $tabPanel = $form.find('.tabpanel');
+            if ($tabPanel.length) {
+                var $firstError = $tabPanel.find('.parsley-error').first();
                 if ($firstError.length) {
                     var $tab = $form.find('[role="tablist"] li').eq($firstError.closest('.tab-pane').index());
                     $tab.find('a').tab('show');

diff --git a/src/Clastic/BackofficeBundle/Resources/public/styles/form.less b/src/Clastic/BackofficeBundle/Resources/public/styles/form.less
@@ -5,6 +5,9 @@
 .input-group span.input-group-addon {
   cursor: default;
 }
+.help-block.bg-danger > div {
+  padding: 5px 10px;
+}
 
 @import './form/multiselect';
 @import './form/collection';

diff --git a/src/Clastic/BackofficeBundle/Resources/views/Form/fields.html.twig b/src/Clastic/BackofficeBundle/Resources/views/Form/fields.html.twig
@@ -4,18 +4,28 @@
 
 {% block form_row -%}
     {% if form.parent.parent %}
-        <div class="form-group">
+        <div class="form-group{%- if errors|length > 0 %} has-error{%- endif -%}">
         {% set attr = attr|merge({'class': (attr.class|default('') ~ ' form-control')|trim}) %}
     {% endif %}
     {{- form_label(form) -}}
-    {{- form_errors(form) -}}
     {{- form_widget(form) -}}
+    {{- form_errors(form) -}}
 
     {% if form.parent.parent %}
         </div>
     {% endif %}
 {%- endblock form_row %}
 
+{%- block form_errors -%}
+    {%- if errors|length > 0 -%}
+        <span class="bg-danger help-block">
+            {%- for error in errors -%}
+                <div class="text-danger">{{ error.message }}</div>
+            {%- endfor -%}
+        </span>
+    {%- endif -%}
+{%- endblock form_errors -%}
+
 {##
  # Fields
  #}