Changed error layout for single-question form pages, and tweaked form…

…-group-error styles to support this HTML use.
alphagov · Oct 30, 2017 · 133637d · 133637d
1 parent fe065bd
commit 133637d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/app/views/snippets/form_error_radio_h1_legend.html b/app/views/snippets/form_error_radio_h1_legend.html
@@ -16,24 +16,27 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 </div>
 {% endif %}
 
-<div class="form-group {% if error %} form-group-error{% endif %}">
+<div class="form-group">
   <fieldset class="with-heading-large">
 
     <legend {% if error %} id="example-personal-details"{% endif %}>
       <h1 class="heading-large">
         Are your personal details correct and up-to-date?
       </h1>
 
+      {% if error %}<div class="form-group-error">{% endif %}
       <span class="form-hint">Look at your name, signature and other details.</span>
 
       {% if error %}
         <span class="error-message">
           Error message about personal details goes here
         </span>
+      </div>
       {% endif %}
 
     </legend>
 
+    {% if error %}<div class="form-group-error">{% endif %}
     <div class="multiple-choice">
       <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
       <label for="personal_details_yes">Yes, my personal details are correct</label>
@@ -43,6 +46,7 @@ <h1 class="heading-large">
       <input id="personal_details_no" type="radio" name="personalDetails" value="No">
       <label for="personal_details_no">No, some details are wrong or have changed</label>
     </div>
+    {% if error %}</div>{% endif %}
 
   </fieldset>
 </div>

diff --git a/app/views/snippets/form_error_text_h1_label.html b/app/views/snippets/form_error_text_h1_label.html
@@ -17,22 +17,26 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 {% endif %}
 
 
-<div class="form-group {% if error %} form-group-error{% endif %}">
+<div class="form-group">
     <h1>
       <label for="name"{% if error %} id="example-name"{% endif %}>
         <span class="heading-large">What is your name?</span>
 
+        {% if error %}<div class="form-group-error">{% endif %}
         <span class="form-hint">You can enter your full name</span>
 
         {% if error %}
           <span class="error-message">
             Error message about name goes here
           </span>
+        </div>
         {% endif %}
       </label>
     </h1>
 
+    {% if error %}<div class="form-group-error">{% endif %}
     <input type="text" class="form-control{% if error %} form-control-error{% endif %}" id="name" name="name" value="">
+    {% if error %}</div>{% endif %}
 </div>
 
 <input class="button" type="submit" value="Continue">
diff --git a/assets/sass/elements/forms/_form-validation.scss b/assets/sass/elements/forms/_form-validation.scss
@@ -3,6 +3,7 @@
 
 // Use .form-group-error to add a red border to the left of a .form-group
 .form-group-error {
+  @extend %contain-floats;
   margin-right: 15px;
   border-left: 4px solid $error-colour;
   padding-left: 10px;