Added examples for simple single question form pages, with and withou…

…t errors. See alphagov#543.
paulwaitehomeoffice · Sep 13, 2017 · 89d09a0 · 89d09a0
1 parent dea6e7b
commit 89d09a0
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 1 deletion.
diff --git a/app/routes.js b/app/routes.js
@@ -173,6 +173,50 @@ module.exports = {
       res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
     })
 
+    // Example page: Form validation
+    app.get('/errors/example-form-validation-single-question-radio-h1-legend', function (req, res) {
+      var section = 'errors'
+      var sectionName = 'Errors and validation'
+      var pageName = 'Example: Form validation - single question, page heading in legend'
+      res.render('examples/example_form_validation_single_question_radio_h1_legend', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
+    })
+
+    app.post('/errors/example-form-validation-single-question-radio-h1-legend', function (req, res) {
+      var section = 'errors'
+      var sectionName = 'Errors and validation'
+      var pageName = 'Example: Form validation - single question, page heading in legend'
+      var personalDetails = req.body.personalDetails
+      var error = false
+      if (!personalDetails) {
+        error = true
+      } else {
+        error = false
+      }
+      res.render('examples/example_form_validation_single_question_radio_h1_legend', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
+    })
+
+    // Example page: Form validation
+    app.get('/errors/example-form-validation-single-question-text-h1-label', function (req, res) {
+      var section = 'errors'
+      var sectionName = 'Errors and validation'
+      var pageName = 'Example: Form validation - single question, labed in page heading'
+      res.render('examples/example_form_validation_single_question_text_h1_label', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
+    })
+
+    app.post('/errors/example-form-validation-single-question-text-h1-label', function (req, res) {
+      var section = 'errors'
+      var sectionName = 'Errors and validation'
+      var pageName = 'Example: Form validation - single question, label in page heading'
+      var personalDetails = req.body.personalDetails
+      var error = false
+      if (!personalDetails) {
+        error = true
+      } else {
+        error = false
+      }
+      res.render('examples/example_form_validation_single_question_text_h1_label', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
+    })
+
     // Redirect examples from /examples/ to /section/example-name-of-example
     app.get('/examples/form-validation-single-question-radio', function (req, res) {
       res.redirect('/errors/example-form-validation-single-question-radio')

diff --git a/app/views/examples/example_form_validation_single_question_radio_h1_legend.html b/app/views/examples/example_form_validation_single_question_radio_h1_legend.html
@@ -0,0 +1,22 @@
+{% extends "layout_example.html" %}
+
+{% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
+
+{% block content %}
+<main class="js-error-example" id="content" role="main" tabindex="-1">
+
+  {% include "includes/breadcrumb.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <form method="post" action="/errors/example-form-validation-single-question-radio-h1-legend">
+        {% include "snippets/form_error_radio_h1_legend.html" %}
+      </form>
+
+      {% include "examples/_form_validation_implementation_advice.html" %}
+
+    </div>
+  </div>
+</main>
+{% endblock %}
diff --git a/app/views/examples/example_form_validation_single_question_text_h1_label.html b/app/views/examples/example_form_validation_single_question_text_h1_label.html
@@ -0,0 +1,22 @@
+{% extends "layout_example.html" %}
+
+{% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
+
+{% block content %}
+<main class="js-error-example" id="content" role="main" tabindex="-1">
+
+  {% include "includes/breadcrumb.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <form method="post" action="/errors/example-form-validation-single-question-text-h1-label">
+        {% include "snippets/form_error_text_h1_label.html" %}
+      </form>
+
+      {% include "examples/_form_validation_implementation_advice.html" %}
+
+    </div>
+  </div>
+</main>
+{% endblock %}
diff --git a/app/views/guide_errors.html b/app/views/guide_errors.html
@@ -106,9 +106,19 @@ <h3 class="heading-medium" id="examples">Examples</h3>
   <ul class="list list-bullet">
     <li>
       <a href="/errors/example-form-validation-single-question-radio">
-        form validation - single question
+        form validation - single question, radio buttons
       </a>
     </li>
+    <li>
+      <a href="/errors/example-form-validation-single-question-radio-h1-legend">
+        form validation - single question, radio buttons, page heading in legend
+      </a>
+    </li>
+    <li>
+      <a href="/errors/example-form-validation-single-question-text-h1-label">
+        form validation - single question, text field, label in page heading
+       </a>
+     </li>
     <li>
       <a href="/errors/example-form-validation-multiple-questions">
         form validation - multiple questions

diff --git a/app/views/snippets/form_error_radio_h1_legend.html b/app/views/snippets/form_error_radio_h1_legend.html
@@ -0,0 +1,50 @@
+{% if error %}
+<div class="error-summary" role="alert" aria-labelledby="error-summary-heading" tabindex="-1">
+
+  <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
+    Message to alert the user to a problem goes here
+  </h2>
+
+  <p>
+    Optional description of the errors and how to correct them
+  </p>
+
+  <ul class="error-summary-list">
+    <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
+  </ul>
+
+</div>
+{% endif %}
+
+<div class="form-group {% if error %} form-group-error{% endif %}">
+  <fieldset>
+
+    <legend {% if error %} id="example-personal-details"{% endif %}>
+      <h1 class="heading-large">
+        Are your personal details correct and up-to-date?
+      </h1>
+
+      <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>
+      {% endif %}
+
+    </legend>
+
+    <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>
+    </div>
+
+    <div class="multiple-choice">
+      <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>
+
+  </fieldset>
+</div>
+
+<input class="button" type="submit" value="Continue">
diff --git a/app/views/snippets/form_error_text_h1_label.html b/app/views/snippets/form_error_text_h1_label.html
@@ -0,0 +1,38 @@
+{% if error %}
+<div class="error-summary" role="alert" aria-labelledby="error-summary-heading" tabindex="-1">
+
+  <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
+    Message to alert the user to a problem goes here
+  </h2>
+
+  <p>
+    Optional description of the errors and how to correct them
+  </p>
+
+  <ul class="error-summary-list">
+    <li><a href="#example-name">Descriptive link to the question with an error</a></li>
+  </ul>
+
+</div>
+{% endif %}
+
+
+<div class="form-group {% if error %} form-group-error{% endif %}">
+    <h1>
+      <label for=""{% if error %} id="example-name"{% endif %}>
+        <span class="heading-large" style="display:block;">What is your name?</span>
+
+        <span class="form-hint">You can enter your full name</span>
+
+        {% if error %}
+          <span class="error-message">
+            Error message about name goes here
+          </span>
+        {% endif %}
+      </label>
+    </h1>
+
+    <input type="text" class="form-control{% if error %} form-control-error{% endif %}" id="name" name="name" value="">
+</div>
+
+<input class="button" type="submit" value="Continue">