Merge pull request #486 from TechnologyEnhancedLearning/Develop/Features/TD-4180-Associate-input-error-message

Associate error label with target input and add custom error message for Country Search input errors

Author: akdalin-hee

LearningHub.Nhs.WebUI/Styles/nhsuk/pages/createaccount.scss

@@ -72,4 +72,9 @@
     .no-bottom-border {
         border-bottom: 0px;
     }
+
+    .custom-validation-error {
+        color: #d5281b;
+        font-size: 19px;
+    }
 }

LearningHub.Nhs.WebUI/Views/Account/CreateAccountCountrySearch.cshtml

@@ -24,14 +24,22 @@
                     <input type="hidden" name="formSubmission" value="true">
                     <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">
-                        <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>
                             </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>
+                    }
                     </div>
                 </form>