Form error styles

DemocracyClub · Jun 28, 2024 · 986dc22 · 986dc22
1 parent e601ffe
commit 986dc22
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/postcode_lookup/templates/includes/extra_header.html b/postcode_lookup/templates/includes/extra_header.html
@@ -175,6 +175,7 @@
         font-weight: bold;
     }
 
+
     body#dc #dc-postcode-search-form .dc-form-hint {
         font-size: 0.8rem;
         opacity: 70%;
@@ -192,6 +193,12 @@
         color: white;
     }
 
+    body#dc form#dc-postcode-search-form .dc-inline-form button:hover,
+    body#dc form#dc-postcode-search-form .dc-inline-form button:focus
+    {
+        background-color: var(--ec-light-blue);
+    }
+
     body#dc form#dc-postcode-search-form .dc-inline-form input {
         padding: 1em;
         background-color: white;
@@ -202,12 +209,24 @@
         width: 100%;
     }
 
-    body#dc form#dc-postcode-search-form .dc-inline-form *:focus,
-    body#dc form#dc-postcode-search-form .dc-inline-form *:focus-visible {
-        outline: 2px solid var(--ec-light-blue);
-        outline-offset: -2px;
-        box-shadow: none;
+    body#dc form#dc-postcode-search-form.error .dc-inline-form input:not(:valid) {
+        border: 4px solid red;
+    }
+
+    p.error_message {
+        display:none;
+    }
+    p.error_message:has(+ .dc-inline-form input[aria-invalid="true"])
+    {
+        display:block;
+        border-left:4px solid red !important;
+        padding-left:1em;
     }
+    p.error_message:has(+ .dc-inline-form input[aria-invalid="false"]),
+    p.error_message:has(+ .dc-inline-form input:valid) {
+        display:none;
+    }
+
 
     body#dc .grid {
         display: grid;

diff --git a/postcode_lookup/templates/index.html b/postcode_lookup/templates/index.html
@@ -3,7 +3,7 @@
 {% block page_hero %}
 {% endblock %}
 {% block breadcrumbs %}
-        {{ super() }}
+    {{ super() }}
     <div class="c-hero--landing-page c-hero" style="border-top:1px solid white;">
         <div class="o-container">
             <div class="c-hero__wrapper dc-background-image">
@@ -22,13 +22,15 @@ <h1 class="c-hero__title">
                         <label for="postcode-search">
                             {% trans %}Enter your postcode{% endtrans %}</label>
                         <p class="dc-form-hint">eg. SW1A 2AA</p>
+                        <p class="error_message">Please enter a valid UK postcode</p>
                         <div class="dc-inline-form">
                             <input
                                     id="postcode-search"
                                     type="text"
                                     name="postcode-search"
                                     pattern="^([A-Z]{1,2}[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0AA)$"
                                     required>
+
                             <button type="submit" name="Submit Postcode"
                                     formaction="{{ request.url_for(url_prefix + "_postcode_" + request.current_language) }}">
                                 Search
@@ -54,6 +56,28 @@ <h1 class="c-hero__title">
                         postcodeInput.addEventListener('input', function () {
                             postcodeInput.setCustomValidity('');
                         });
+
+
+                        // Function to get query parameter value by name
+                        function getQueryParam(param) {
+                            const urlParams = new URLSearchParams(window.location.search);
+                            return urlParams.get(param);
+                        }
+
+                        const errorParam = getQueryParam('invalid-postcode');
+                        if (errorParam === '1') {
+                            // Display the error message
+                            document.getElementById('dc-postcode-search-form').classList.add("error");
+                            postcodeInput.setAttribute("aria-invalid", "true")
+                        }
+
+                        postcodeInput.addEventListener('input', function () {
+                            if (postcodeInput.validity.valid) {
+                                postcodeInput.setAttribute("aria-invalid", "false");
+                            }
+
+                        })
+
                     </script>
                 </div>
             </div>
@@ -76,7 +100,8 @@ <h2>{% trans %}What this tool can tell you{% endtrans %}</h2>
             <li>
                 <h3>Which elections are happening in my area?</h3>
                 <p>When you enter your postcode, you’ll find out which elections are coming up in your area. This
-                    includes UK Parliamentary general elections, Scottish Parliament elections, Senedd elections, local elections, mayoral elections,
+                    includes UK Parliamentary general elections, Scottish Parliament elections, Senedd elections, local
+                    elections, mayoral elections,
                     Police and Crime Commissioner elections and by-elections.</p>
             </li>
             <li>