From ab327635c48e9a127e22bb44e23da4994ae8c2d6 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 15 Feb 2017 08:41:04 +0000
Subject: [PATCH 1/5] Add two new classes for form validation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.form-group-error - to apply a red border to a .form-group
.fom-control-error - to apply a red border to a .form-control

This removes the need to set a parent ‘.error’ class - at present this
is setting both a border to the left of a form-group div and the border
on a form control.
---
 .../sass/elements/forms/_form-validation.scss | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/public/sass/elements/forms/_form-validation.scss b/public/sass/elements/forms/_form-validation.scss
index ae1c9ea8a..742d1f8ba 100644
--- a/public/sass/elements/forms/_form-validation.scss
+++ b/public/sass/elements/forms/_form-validation.scss
@@ -1,19 +1,9 @@
 // Form validation
 // ==========================================================================
 
-// Use error to add a red border to the left of a .form-group
-.error {
-
-  // Ensure the .error class is applied to .form-group, otherwise box-sizing(border-box) will need to be used
-  // @include box-sizing(border-box);
+// Use .form-group-error to add a red border to the left of a .form-group
+.form-group-error {
   margin-right: 15px;
-
-  // Form inputs should have a red border
-  // Add a red border to .form-controls that are direct descendants
-  > .form-control {
-    border: 4px solid $error-colour;
-  }
-
   border-left: 4px solid $error-colour;
   padding-left: 10px;
 
@@ -21,9 +11,14 @@
     border-left: 5px solid $error-colour;
     padding-left: $gutter-half;
   }
+}
 
+// Use .form-control-error to add a red border to .form-control
+.form-control-error {
+  border: 4px solid $error-colour;
 }
 
+
 // Error messages should be red and bold
 .error-message {
   @include bold-19;

From 7d5b5c2cf9bb0f95ceba323e2c2deef9f9141c16 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 15 Feb 2017 08:49:48 +0000
Subject: [PATCH 2/5] Use the new .form-group-error class

This will apply a red border to the left side of a form-group div
---
 app/views/examples/example_form_elements.html | 26 +++++++++----------
 .../form_error_multiple_show_errors.html      |  4 +--
 .../form_error_radio_show_errors.html         |  2 +-
 .../snippets/form_file_upload_error.html      |  2 +-
 .../form_inset_radios_show_errors.html        |  4 +--
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
index 6fa20295c..da1a4a67a 100644
--- a/app/views/examples/example_form_elements.html
+++ b/app/views/examples/example_form_elements.html
@@ -124,7 +124,7 @@ <h2 class="heading-medium">
           </p>
 
           <!-- Text inside a label - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="example-form-control">
               This is the label text
               <span class="form-hint">
@@ -138,7 +138,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Hint text outside a label (preference is inside, to be read by AT) - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="example-form-control">
               This is the label text
             </label>
@@ -152,7 +152,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Text inside a legend - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <fieldset>
 
               <legend>
@@ -174,7 +174,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Date of birth -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <fieldset>
               <legend>
                 <span class="form-label-bold">Date of birth</span>
@@ -269,7 +269,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Input type="text" - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label" for="input-text-b">
               This is the label text
               <span class="error-message">
@@ -288,7 +288,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Input type="text" - error (bold label) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="input-text-d">
               This is the label text in bold
               <span class="error-message">
@@ -320,7 +320,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Input type="text" - error (bold label with hint text) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="input-text-h">
               This is the label text
               <span class="form-hint">
@@ -352,7 +352,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Textarea - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label" for="textarea-b">
               This is the label text
               <span class="error-message">
@@ -371,7 +371,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Textarea - error (bold label) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="textarea-d">
               This is the label text in bold
               <span class="error-message">
@@ -391,7 +391,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Textarea - error (bold label, with hint text) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="textarea-f">
               This is the label text
               <span class="form-hint">This is hint text</span>
@@ -419,7 +419,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Select box - error -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label" for="select-box-b">
               This is the label text
               <span class="error-message">
@@ -448,7 +448,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Select box - error (with bold text) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="select-box-d">
               This is the label text
               <span class="error-message">
@@ -480,7 +480,7 @@ <h2 class="heading-medium">
           </div>
 
           <!-- Select box - error (with bold text and hint text) -->
-          <div class="form-group error">
+          <div class="form-group form-group-error">
             <label class="form-label-bold" for="select-box-h">
               This is the label text
               <span class="form-hint">
diff --git a/app/views/snippets/form_error_multiple_show_errors.html b/app/views/snippets/form_error_multiple_show_errors.html
index d99a4681b..f4aab9271 100644
--- a/app/views/snippets/form_error_multiple_show_errors.html
+++ b/app/views/snippets/form_error_multiple_show_errors.html
@@ -19,7 +19,7 @@ <h1 class="heading-large">
   Your personal details
 </h1>
 
-<div class="form-group error">
+<div class="form-group form-group-error">
 
   <label for="example-full-name" id="error-full-name">
 
@@ -32,7 +32,7 @@ <h1 class="heading-large">
   <input class="form-control" id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
 </div>
 
-<div class="form-group error">
+<div class="form-group form-group-error">
 
   <label for="example-ni-number" id="error-ni-number">
 
diff --git a/app/views/snippets/form_error_radio_show_errors.html b/app/views/snippets/form_error_radio_show_errors.html
index dab330ea0..1d3c69084 100644
--- a/app/views/snippets/form_error_radio_show_errors.html
+++ b/app/views/snippets/form_error_radio_show_errors.html
@@ -23,7 +23,7 @@ <h1 class="heading-large">
 </p>
 
 <form>
-  <div class="form-group error">
+  <div class="form-group form-group-error">
     <fieldset>
 
       <legend id="example-personal-details">
diff --git a/app/views/snippets/form_file_upload_error.html b/app/views/snippets/form_file_upload_error.html
index d25caae07..a9279edc0 100644
--- a/app/views/snippets/form_file_upload_error.html
+++ b/app/views/snippets/form_file_upload_error.html
@@ -1,4 +1,4 @@
-<div class="form-group error">
+<div class="form-group form-group-error">
   <label class="form-label" for="file-input">
     Upload a file
     <span class="error-message">
diff --git a/app/views/snippets/form_inset_radios_show_errors.html b/app/views/snippets/form_inset_radios_show_errors.html
index 40cd569ba..907bdfe72 100644
--- a/app/views/snippets/form_inset_radios_show_errors.html
+++ b/app/views/snippets/form_inset_radios_show_errors.html
@@ -3,7 +3,7 @@ <h1 class="heading-medium" id="example-conditional-errors">
 </h1>
 
 <form>
-  <div class="form-group error">
+  <div class="form-group form-group-error">
 
     <fieldset>
 
@@ -79,7 +79,7 @@ <h1 class="heading-medium" id="example-conditional-errors-2">
         Monthly
       </label>
       <div class="panel panel-border-narrow panel-with-error" id="paid-monthly-2">
-        <div class="form-group error">
+        <div class="form-group form-group-error">
           <label class="form-label" for="example-paid-monthly-pay-2">
             Monthly take home pay (after tax)?
             <span class="error-message">

From c2cdceefd8b3813dd5b849fee04c677318d0a64b Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 15 Feb 2017 09:06:42 +0000
Subject: [PATCH 3/5] Use the new .form-control-error class

Rather than setting a border on any .form-control that is a direct
child of the .error class, require that a new class is explicitly set
on any fields with an error - by using .form-control-error
---
 app/views/examples/example_form_elements.html | 24 +++++++++----------
 app/views/snippets/form_error_multiple.html   |  4 ++--
 .../form_error_multiple_show_errors.html      |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
index da1a4a67a..3388fdb62 100644
--- a/app/views/examples/example_form_elements.html
+++ b/app/views/examples/example_form_elements.html
@@ -134,7 +134,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <input class="form-control" id="example-form-control" type="text">
+            <input class="form-control form-control-error" id="example-form-control" type="text">
           </div>
 
           <!-- Hint text outside a label (preference is inside, to be read by AT) - error -->
@@ -148,7 +148,7 @@ <h2 class="heading-medium">
             <span class="error-message">
               Error message goes here
             </span>
-            <input class="form-control" id="example-form-control" type="text">
+            <input class="form-control form-control-error" id="example-form-control" type="text">
           </div>
 
           <!-- Text inside a legend - error -->
@@ -184,7 +184,7 @@ <h2 class="heading-medium">
               <div class="form-date">
                 <div class="form-group form-group-day">
                   <label class="form-label" for="example-dob-day">Day</label>
-                  <input class="form-control" id="example-dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint">
+                  <input class="form-control form-control-error" id="example-dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint">
                 </div>
                 <div class="form-group form-group-month">
                   <label class="form-label" for="example-dob-month">Month</label>
@@ -276,7 +276,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <input class="form-control" id="input-text-b" type="text">
+            <input class="form-control form-control-error" id="input-text-b" type="text">
           </div>
 
           <!-- Input type="text" (bold label) -->
@@ -295,7 +295,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <input class="form-control" id="input-text-d" type="text">
+            <input class="form-control form-control-error" id="input-text-d" type="text">
           </div>
 
           <!-- Input type="text" (bold label with hint text) -->
@@ -330,7 +330,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <input class="form-control" id="input-text-h" type="text">
+            <input class="form-control form-control-error" id="input-text-h" type="text">
           </div>
         </div>
 
@@ -359,7 +359,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <textarea class="form-control" id="textarea-b" cols="30" rows="10"></textarea>
+            <textarea class="form-control form-control-error" id="textarea-b" cols="30" rows="10"></textarea>
           </div>
 
           <!-- Textarea (bold label) -->
@@ -378,7 +378,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <textarea class="form-control" id="textarea-d" cols="30" rows="10"></textarea>
+            <textarea class="form-control form-control-error" id="textarea-d" cols="30" rows="10"></textarea>
           </div>
 
           <!-- Textarea (bold label, with hint text) -->
@@ -399,7 +399,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <textarea class="form-control" id="textarea-f" cols="30" rows="10"></textarea>
+            <textarea class="form-control form-control-error" id="textarea-f" cols="30" rows="10"></textarea>
           </div>
         </div>
 
@@ -426,7 +426,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <select class="form-control" id="select-box-b">
+            <select class="form-control form-control-error" id="select-box-b">
               <option>GOV.UK elements option 1</option>
               <option>GOV.UK elements option 2</option>
               <option>GOV.UK elements option 3</option>
@@ -455,7 +455,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <select class="form-control" id="select-box-d">
+            <select class="form-control form-control-error" id="select-box-d">
               <option>GOV.UK elements option 1</option>
               <option>GOV.UK elements option 2</option>
               <option>GOV.UK elements option 3</option>
@@ -490,7 +490,7 @@ <h2 class="heading-medium">
                 Error message goes here
               </span>
             </label>
-            <select class="form-control" id="select-box-h">
+            <select class="form-control form-control-error" id="select-box-h">
               <option>GOV.UK elements option 1</option>
               <option>GOV.UK elements option 2</option>
               <option>GOV.UK elements option 3</option>
diff --git a/app/views/snippets/form_error_multiple.html b/app/views/snippets/form_error_multiple.html
index 76ad02da3..472b14ced 100644
--- a/app/views/snippets/form_error_multiple.html
+++ b/app/views/snippets/form_error_multiple.html
@@ -39,7 +39,7 @@ <h1 class="heading-large">
 
   </label>
 
-  <input class="form-control" id="example-full-name" type="text" name="fullName" value="{{fullName}}" {% if error %}{% if not fullName %} aria-describedby="error-message-full-name"{% endif %}{% endif %}>
+  <input class="form-control {% if error %}{% if not fullName %} form-control-error{% endif %}{% endif %}" id="example-full-name" type="text" name="fullName" value="{{fullName}}" {% if error %}{% if not fullName %} aria-describedby="error-message-full-name"{% endif %}{% endif %}>
 </div>
 
 <div class="form-group {% if error %}{% if not niNo %} error{% endif %}{% endif %}">
@@ -61,7 +61,7 @@ <h1 class="heading-large">
     {% endif %}
   </label>
 
-  <input class="form-control" id="example-ni-number" type="text" name="niNo" value="{{niNo}}" {% if error %}{% if not niNo %} aria-describedby="error-message-ni-number"{% endif %}{% endif %}>
+  <input class="form-control {% if error %}{% if not niNo %} form-control-error{% endif %}{% endif %}" id="example-ni-number" type="text" name="niNo" value="{{niNo}}" {% if error %}{% if not niNo %} aria-describedby="error-message-ni-number"{% endif %}{% endif %}>
 
 </div>
 
diff --git a/app/views/snippets/form_error_multiple_show_errors.html b/app/views/snippets/form_error_multiple_show_errors.html
index f4aab9271..99f9c0b7a 100644
--- a/app/views/snippets/form_error_multiple_show_errors.html
+++ b/app/views/snippets/form_error_multiple_show_errors.html
@@ -29,7 +29,7 @@ <h1 class="heading-large">
 
   </label>
 
-  <input class="form-control" id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
+  <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
 </div>
 
 <div class="form-group form-group-error">
@@ -48,7 +48,7 @@ <h1 class="heading-large">
 
   </label>
 
-  <input class="form-control" id="example-ni-number" type="text" name="niNo" value="" aria-describedby="error-message-ni-number">
+  <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="" aria-describedby="error-message-ni-number">
 
 </div>
 

From 9ea4a920add541fcece60b9b1e1d545bbab5a074 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 15 Feb 2017 09:07:18 +0000
Subject: [PATCH 4/5] Update example pages to use the .form-group-error class

---
 app/views/snippets/form_error_multiple.html | 4 ++--
 app/views/snippets/form_error_radio.html    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/snippets/form_error_multiple.html b/app/views/snippets/form_error_multiple.html
index 472b14ced..f7ff609df 100644
--- a/app/views/snippets/form_error_multiple.html
+++ b/app/views/snippets/form_error_multiple.html
@@ -25,7 +25,7 @@ <h1 class="heading-large">
   Your personal details
 </h1>
 
-<div class="form-group {% if error %}{% if not fullName %} error{% endif %}{% endif %}">
+<div class="form-group {% if error %}{% if not fullName %} form-group-error{% endif %}{% endif %}">
 
   <label for="example-full-name" {% if error %}{% if not fullName %} id="error-full-name"{% endif %}{% endif %}>
 
@@ -42,7 +42,7 @@ <h1 class="heading-large">
   <input class="form-control {% if error %}{% if not fullName %} form-control-error{% endif %}{% endif %}" id="example-full-name" type="text" name="fullName" value="{{fullName}}" {% if error %}{% if not fullName %} aria-describedby="error-message-full-name"{% endif %}{% endif %}>
 </div>
 
-<div class="form-group {% if error %}{% if not niNo %} error{% endif %}{% endif %}">
+<div class="form-group {% if error %}{% if not niNo %} form-group-error{% endif %}{% endif %}">
 
   <label for="example-ni-number" {% if error %}{% if not niNo %} id="error-full-name"{% endif %}{% endif %}>
 
diff --git a/app/views/snippets/form_error_radio.html b/app/views/snippets/form_error_radio.html
index aa72cf03b..55f1c5322 100644
--- a/app/views/snippets/form_error_radio.html
+++ b/app/views/snippets/form_error_radio.html
@@ -25,7 +25,7 @@ <h1 class="heading-large">
 </p>
 
 
-<div class="form-group {% if error %} error{% endif %}">
+<div class="form-group {% if error %} form-group-error{% endif %}">
   <fieldset>
 
     <legend {% if error %} id="example-personal-details"{% endif %}>

From a0ac333492ec15d661de76235a574f11baa7307f Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 15 Feb 2017 09:19:22 +0000
Subject: [PATCH 5/5] Update the date of birth examples

Use this to show how the new form-control-error class can be applied to
individual form-control fields.
---
 app/views/examples/example_date.html          | 77 +++++++++++++++++++
 app/views/examples/example_form_elements.html | 65 ++++++++++++++--
 app/views/snippets/form_date_show_errors.html | 27 +++++++
 3 files changed, 162 insertions(+), 7 deletions(-)
 create mode 100644 app/views/snippets/form_date_show_errors.html

diff --git a/app/views/examples/example_date.html b/app/views/examples/example_date.html
index 2d0d51495..607633cbf 100644
--- a/app/views/examples/example_date.html
+++ b/app/views/examples/example_date.html
@@ -17,6 +17,83 @@ <h1 class="heading-xlarge">
       <!-- Date of birth -->
       {% include "snippets/form_date.html" %}
 
+      {% include "snippets/form_date_show_errors.html" %}
+
+      <!-- Date of birth -->
+      <div class="form-group form-group-error">
+        <fieldset>
+          <legend>
+            <span class="form-label-bold">Date of birth</span>
+            <span class="form-hint" id="example-dob-hint-1">For example, 31 3 1980</span>
+            <span class="error-message">Error message goes here</span>
+          </legend>
+          <div class="form-date">
+            <div class="form-group form-group-day">
+              <label class="form-label" for="example-dob-day-1">Day</label>
+              <input class="form-control form-control-error" id="example-dob-day-1" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-1">
+            </div>
+            <div class="form-group form-group-month">
+              <label class="form-label" for="example-dob-month-1">Month</label>
+              <input class="form-control" id="example-dob-month-1" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            </div>
+            <div class="form-group form-group-year">
+              <label class="form-label" for="example-dob-year-1">Year</label>
+              <input class="form-control" id="example-dob-year-1" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+            </div>
+          </div>
+        </fieldset>
+      </div>
+
+      <!-- Date of birth -->
+      <div class="form-group form-group-error">
+        <fieldset>
+          <legend>
+            <span class="form-label-bold">Date of birth</span>
+            <span class="form-hint" id="example-dob-hint-2">For example, 31 3 1980</span>
+            <span class="error-message">Error message goes here</span>
+          </legend>
+          <div class="form-date">
+            <div class="form-group form-group-day">
+              <label class="form-label" for="example-dob-day-2">Day</label>
+              <input class="form-control" id="example-dob-day-2" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-2">
+            </div>
+            <div class="form-group form-group-month">
+              <label class="form-label" for="example-dob-month-2">Month</label>
+              <input class="form-control form-control-error" id="example-dob-month-2" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            </div>
+            <div class="form-group form-group-year">
+              <label class="form-label" for="example-dob-year-2">Year</label>
+              <input class="form-control" id="example-dob-year-2" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+            </div>
+          </div>
+        </fieldset>
+      </div>
+
+      <!-- Date of birth -->
+      <div class="form-group form-group-error">
+        <fieldset>
+          <legend>
+            <span class="form-label-bold">Date of birth</span>
+            <span class="form-hint" id="example-dob-hint-3">For example, 31 3 1980</span>
+            <span class="error-message">Error message goes here</span>
+          </legend>
+          <div class="form-date">
+            <div class="form-group form-group-day">
+              <label class="form-label" for="example-dob-day-3">Day</label>
+              <input class="form-control" id="example-dob-day-3" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-3">
+            </div>
+            <div class="form-group form-group-month">
+              <label class="form-label" for="example-dob-month-3">Month</label>
+              <input class="form-control" id="example-dob-month-3" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            </div>
+            <div class="form-group form-group-year">
+              <label class="form-label" for="example-dob-year-3">Year</label>
+              <input class="form-control form-control-error" id="example-dob-year-3" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+            </div>
+          </div>
+        </fieldset>
+      </div>
+
     </div>
   </div>
 
diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
index 3388fdb62..bb0b45202 100644
--- a/app/views/examples/example_form_elements.html
+++ b/app/views/examples/example_form_elements.html
@@ -178,25 +178,76 @@ <h2 class="heading-medium">
             <fieldset>
               <legend>
                 <span class="form-label-bold">Date of birth</span>
-                <span class="form-hint" id="example-dob-hint">For example, 31 3 1980</span>
+                <span class="form-hint" id="example-dob-hint-1">For example, 31 3 1980</span>
                 <span class="error-message">Error message goes here</span>
               </legend>
               <div class="form-date">
                 <div class="form-group form-group-day">
-                  <label class="form-label" for="example-dob-day">Day</label>
-                  <input class="form-control form-control-error" id="example-dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint">
+                  <label class="form-label" for="example-dob-day-1">Day</label>
+                  <input class="form-control form-control-error" id="example-dob-day-1" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-1">
                 </div>
                 <div class="form-group form-group-month">
-                  <label class="form-label" for="example-dob-month">Month</label>
-                  <input class="form-control" id="example-dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+                  <label class="form-label" for="example-dob-month-1">Month</label>
+                  <input class="form-control" id="example-dob-month-1" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
                 </div>
                 <div class="form-group form-group-year">
-                  <label class="form-label" for="example-dob-year">Year</label>
-                  <input class="form-control" id="example-dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+                  <label class="form-label" for="example-dob-year-1">Year</label>
+                  <input class="form-control" id="example-dob-year-1" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
                 </div>
               </div>
             </fieldset>
           </div>
+
+          <!-- Date of birth -->
+          <div class="form-group form-group-error">
+            <fieldset>
+              <legend>
+                <span class="form-label-bold">Date of birth</span>
+                <span class="form-hint" id="example-dob-hint-2">For example, 31 3 1980</span>
+                <span class="error-message">Error message goes here</span>
+              </legend>
+              <div class="form-date">
+                <div class="form-group form-group-day">
+                  <label class="form-label" for="example-dob-day-2">Day</label>
+                  <input class="form-control" id="example-dob-day-2" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-2">
+                </div>
+                <div class="form-group form-group-month">
+                  <label class="form-label" for="example-dob-month-2">Month</label>
+                  <input class="form-control form-control-error" id="example-dob-month-2" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+                </div>
+                <div class="form-group form-group-year">
+                  <label class="form-label" for="example-dob-year-2">Year</label>
+                  <input class="form-control" id="example-dob-year-2" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+                </div>
+              </div>
+            </fieldset>
+          </div>
+
+          <!-- Date of birth -->
+          <div class="form-group form-group-error">
+            <fieldset>
+              <legend>
+                <span class="form-label-bold">Date of birth</span>
+                <span class="form-hint" id="example-dob-hint-3">For example, 31 3 1980</span>
+                <span class="error-message">Error message goes here</span>
+              </legend>
+              <div class="form-date">
+                <div class="form-group form-group-day">
+                  <label class="form-label" for="example-dob-day-3">Day</label>
+                  <input class="form-control" id="example-dob-day-3" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-3">
+                </div>
+                <div class="form-group form-group-month">
+                  <label class="form-label" for="example-dob-month-3">Month</label>
+                  <input class="form-control" id="example-dob-month-3" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+                </div>
+                <div class="form-group form-group-year">
+                  <label class="form-label" for="example-dob-year-3">Year</label>
+                  <input class="form-control form-control-error" id="example-dob-year-3" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+                </div>
+              </div>
+            </fieldset>
+          </div>
+
         </div>
 
         <div class="form-section">
diff --git a/app/views/snippets/form_date_show_errors.html b/app/views/snippets/form_date_show_errors.html
new file mode 100644
index 000000000..36a7b2c61
--- /dev/null
+++ b/app/views/snippets/form_date_show_errors.html
@@ -0,0 +1,27 @@
+<form>
+  <div class="form-group form-group-error">
+    <fieldset>
+      <legend>
+        <span class="form-label-bold">
+          What is your date of birth?
+        </span>
+        <span class="form-hint" id="dob-hint-example">For example, 31 3 1980</span>
+        <span class="error-message">Error message goes here</span>
+      </legend>
+      <div class="form-date">
+        <div class="form-group form-group-day">
+          <label class="form-label" for="dob-day-example">Day</label>
+          <input class="form-control form-control-error" id="dob-day-example" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="dob-hint-example">
+        </div>
+        <div class="form-group form-group-month">
+          <label class="form-label" for="dob-month-example">Month</label>
+          <input class="form-control form-control-error" id="dob-month-example" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+        </div>
+        <div class="form-group form-group-year">
+          <label class="form-label" for="dob-year-example">Year</label>
+          <input class="form-control form-control-error" id="dob-year-example" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</form>