From 840d40ebebee9041d39da864da720f3922b1b6b5 Mon Sep 17 00:00:00 2001
From: Arunima George <arunima.george@nhs.net>
Date: Thu, 28 Nov 2024 14:09:54 +0000
Subject: [PATCH] TD-4180: Error message changed according to NHS design
 pattern

---
 .../Account/CreateAccountCountrySearch.cshtml | 30 ++++++++++---------
 .../Account/CreateAccountSearchRole.cshtml    | 16 +++++++---
 .../CreateAccountWorkPlaceSearch.cshtml       | 15 ++++++++--
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountCountrySearch.cshtml b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountCountrySearch.cshtml
index b2aad6de5..c037697fe 100644
--- a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountCountrySearch.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountCountrySearch.cshtml
@@ -21,25 +21,27 @@
                 }
                 <h1 class="nhsuk-heading-xl">Search for your country</h1>
                 <form asp-controller="Account" asp-action="CreateAccountCountrySelection" method="get">
-                    <input type="hidden" name="formSubmission" value="true">
+                    <input type="hidden" name="formSubmission" value="true">  
+                    <div class="@(errorHasOccurred ? "nhsuk-form-group input-validation-error" : "nhsuk-form-group")">
                     <label for="FilterText" class="nhsuk-body-l nhsuk-u-font-size-19 nhsuk-u-margin-bottom-3">Search for example, England</label>
-                    <div class="nhsuk-form-group search-box-container" style="white-space:nowrap">
+                    @if (errorHasOccurred)
+                    {
+                        <span class="nhsuk-error-message">
+                            <span class="nhsuk-u-visually-hidden">Error:</span> @CommonValidationErrorMessages.SearchTermRequired
+                        </span>
+                    }
+                     <div class="nhsuk-form-group search-box-container" style="white-space:nowrap">
                         <input class="nhsuk-input nhsuk-search__input" type="search" autocomplete="off" id="FilterText" name="FilterText" placeholder="" value="@Model.FilterText" @if (errorHasOccurred)
                         {
                             <text>aria-describedby="error-summary-title custom-validation-error"</text>
                         }>
-                        <button class="nhsuk-search__submit" type="submit">
-                            <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-                            </svg>
-                            <span class="nhsuk-u-visually-hidden">Search</span>
-                        </button>
-                    </div>
-                    <div>
-                    @if (errorHasOccurred)
-                    {
-                        <span id="custom-validation-error" class="custom-validation-error">@CommonValidationErrorMessages.SearchTermRequired</span>
-                    }
+                            <button class="nhsuk-search__submit" type="submit">
+                                <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                                    <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+                                </svg>
+                                <span class="nhsuk-u-visually-hidden">Search</span>
+                            </button>
+                     </div>
                     </div>
                 </form>
 
diff --git a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountSearchRole.cshtml b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountSearchRole.cshtml
index 21c3e60b7..c8b48178e 100644
--- a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountSearchRole.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountSearchRole.cshtml
@@ -25,11 +25,20 @@
 
                 <form asp-controller="Account" asp-action="CreateAccountCurrentRole" method="get">
                     <input type="hidden" name="formSubmission" value="true">
-
+                    <div class="@(errorHasOccurred ? "nhsuk-form-group input-validation-error" : "nhsuk-form-group")">
                     <label for="FilterText" class="nhsuk-body-l nhsuk-u-font-size-19 nhsuk-u-margin-bottom-3">Use a generic term to best describe your role</label>
+                    @if (errorHasOccurred)
+                    {
+                        <span class="nhsuk-error-message">
+                            <span class="nhsuk-u-visually-hidden">Error:</span> @CommonValidationErrorMessages.SearchTermRequired
+                        </span>
+                    }
                     <div class="nhsuk-form-group search-box-container nhsuk-u-padding-bottom-5" style="white-space:nowrap">
                         <input type="hidden" name="RegionId" value="@Context.Request.Query["RegionId"]">
-                        <input class="nhsuk-input nhsuk-search__input" type="search" autocomplete="off" id="FilterText" name="FilterText" placeholder="" value="@Model.FilterText">
+                        <input class="nhsuk-input nhsuk-search__input" type="search" autocomplete="off" id="FilterText" name="FilterText" placeholder="" value="@Model.FilterText" @if (errorHasOccurred)
+                        {
+                            <text>aria-describedby="error-summary-title custom-validation-error"</text>
+                        }>
                         <button class="nhsuk-search__submit" type="submit">
                             <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                                 <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
@@ -38,8 +47,7 @@
                         </button>
 
                     </div>
-
-
+                    </div>
                 </form>
 
                 <details class="nhsuk-details nhsuk-expander">
diff --git a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountWorkPlaceSearch.cshtml b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountWorkPlaceSearch.cshtml
index 0422a20d7..eb3510f96 100644
--- a/LearningHub.Nhs.WebUI/Views/Account/CreateAccountWorkPlaceSearch.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Account/CreateAccountWorkPlaceSearch.cshtml
@@ -25,13 +25,22 @@
 
                 <form asp-controller="Account" asp-action="CreateAccountWorkPlace" method="get">
                     <input type="hidden" name="formSubmission" value="true">
-
+                    <div class="@(errorHasOccurred ? "nhsuk-form-group input-validation-error" : "nhsuk-form-group")">
                     <label for="FilterText" class="nhsuk-body-l nhsuk-u-font-size-19 nhsuk-u-margin-bottom-3">
                         Enter the name, postcode or Organisation Date Service (ODS) code of your place of work.
 
                     </label>
+                    @if (errorHasOccurred)
+                    {
+                        <span class="nhsuk-error-message">
+                            <span class="nhsuk-u-visually-hidden">Error:</span> @CommonValidationErrorMessages.SearchTermRequired
+                        </span>
+                    }
                     <div class="nhsuk-form-group search-box-container nhsuk-u-padding-bottom-5" style="white-space:nowrap">
-                        <input class="nhsuk-input nhsuk-search__input" type="search" autocomplete="off" id="FilterText" name="FilterText" placeholder="" value="@Model.FilterText">
+                        <input class="nhsuk-input nhsuk-search__input" type="search" autocomplete="off" id="FilterText" name="FilterText" placeholder="" value="@Model.FilterText" @if (errorHasOccurred)
+                        {
+                            <text>aria-describedby="error-summary-title custom-validation-error"</text>
+                        }>
                         <button class="nhsuk-search__submit" type="submit">
                             <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                                 <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
@@ -40,7 +49,7 @@
                         </button>
 
                     </div>
-
+                    </div>
                 </form>
 
                 <details class="nhsuk-details nhsuk-expander">