Update error rendering to satisfy changes in one-per-page

hmcts · Oct 11, 2017 · 775192f · 775192f
1 parent b7c3b24
commit 775192f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/templates/look-and-feel/components/fields.njk b/templates/look-and-feel/components/fields.njk
@@ -7,9 +7,8 @@
   Renders a simple text box input field.
 #}
 {% macro textbox(field, label, hint=false) %}
-<div class="form-group {{ 'form-group-error' if field.error }}">
+<div class="form-group {{ errorClass(field) }}">
 
-  {{ errorsFor(field) }}
   <label class="form-label"
          for="{{ field.id }}">
     {{ label }}
@@ -19,6 +18,7 @@
     </span>
     {%- endif %}
   </label>
+  {{ errorsFor(field) }}
   <input class="form-control"
          id="{{ field.id }}"
          name="{{ field.id }}"
@@ -59,9 +59,7 @@
                           hideQuestion=true,
                           inline=false,
                           type='radio') %}
-  <div class="form-group {{ 'form-group-error' if field.error }}">
-
-    {{ errorsFor(field) }}
+  <div class="form-group {{ errorClass(field) }}">
 
     <fieldset{% if inline %} class="inline"{% endif %} id="{{ field.id }}">
 
@@ -72,10 +70,11 @@
           <h1 class="heading-medium">{{ question }}</h1>
         {% endif %}
         {% if hint -%}
-          <span class="body-text form-hint" id="{{ field.id }}-hint">
+        <span class="body-text form-hint" id="{{ field.id }}-hint">
             {{ hint }}
           </span>
         {%- endif %}
+        {{ errorsFor(field) }}
       </legend>
 
       {% for option in options -%}
@@ -103,10 +102,17 @@
 {% endmacro %}
 
 {% macro errorsFor(field) -%}
-    {% if field.error %}
-        <span class="error-message">
-      {{ field.error | safe}}
+  {% if field.errors %}
+  {% for error in field.errors -%}
+    <span class="error-message">
+      {{ error | safe}}
     </span>
-    {% endif %}
+  {%- endfor %}
+  {% endif %}
 {%- endmacro %}
 
+{% macro errorClass(field) -%}
+  {% if field.errors and field.errors|length > 0 %}
+    form-group-error
+  {% endif %}
+{%- endmacro %}
diff --git a/templates/look-and-feel/layouts/question.html b/templates/look-and-feel/layouts/question.html
@@ -15,14 +15,14 @@
 
 <form action="{{ url }}" method="post" class="form">
 
-  {%- if invalidFields and invalidFields.length !== 0 -%}
+  {%- if form.validated and not form.valid -%}
     <div class="error-summary" role="group" aria-labelledby="error-summary-heading" tabindex="-1">
       <h1 class="heading-medium error-summary-heading" id="error-summary-heading">
         There was a problem
       </h1>
       <ul class="error-summary-list">
-        {%- for field in invalidFields -%}
-          <li><a href="#{{field.id}}">{{field.error}}</a></li>
+        {%- for error in form.errors -%}
+          <li><a href="#{{error.id}}">{{error.message}}</a></li>
         {%- endfor -%}
       </ul>
     </div>