TD-4624 format the error message

Author: sherif-olaboye

DigitalLearningSolutions.Web/Helpers/ProfessionalRegistrationNumberHelper.cs

@@ -2,6 +2,7 @@
 {
 
     using Microsoft.AspNetCore.Mvc.ModelBinding;
+    using System.Text;
     using System.Text.RegularExpressions;
 
     public class ProfessionalRegistrationNumberHelper
@@ -53,14 +54,16 @@ public static void ValidateProfessionalRegistrationNumber(
         public static string GetProfessionalRegistrationNumberErrorMessage()
         {
             return @"The format you entered isn’t recognised. Please check and try again.
-            Valid formats include
-            7 digits - example, 1234567
-            1-2 letters followed by 6 digits - example, AB123456
-            ‘P’ followed by 5-6 digits - example, P12345, P123456
-            ‘C’ or ‘P’ followed by 6 digits - example, C123456, P123456
-            Optional letter followed by 5-6 digits - example, A12345, B123456
-            ‘L’ followed by 4-6 digits - example, L1234, L123456
-            2 digits, hyphen, then 4-5 alphanumeric characters - example, 12-AB123";
+            <br>Valid formats include:
+            <ul>
+                <li>7 digits - example, 1234567</li>
+                <li>1–2 letters followed by 6 digits - example, AB123456</li>
+                <li>‘P’ followed by 5–6 digits - example, P12345, P123456</li>
+                <li>‘C’ or ‘P’ followed by 6 digits - example, C123456, P123456</li>
+                <li>Optional letter followed by 5–6 digits - example, A12345, B123456</li>
+                <li>‘L’ followed by 4–6 digits - example, L1234, L123456</li>
+                <li>2 digits, hyphen, then 4–5 alphanumeric characters - example, 12-AB123</li>
+            </ul>";
         }
     }
 }

DigitalLearningSolutions.Web/Views/Shared/_EditRegistrationNumber.cshtml

@@ -17,6 +17,11 @@
 
   var subject = Model.IsSelfRegistrationOrEdit ? "you" : "they";
   var capitalisedSubject = Model.IsSelfRegistrationOrEdit ? "You" : "They";
+    var professionalRegistrationNumberError = ViewData.ModelState["ProfessionalRegistrationNumber"]?.Errors.FirstOrDefault()?.ErrorMessage;
+    if (ViewData.ModelState.ContainsKey("ProfessionalRegistrationNumber"))
+    {
+        ViewData.ModelState["ProfessionalRegistrationNumber"].Errors.Clear();
+    }
 }
 
 <input type="hidden" asp-for="IsSelfRegistrationOrEdit" />
@@ -53,7 +58,7 @@
           No
         </label>
       </div>
-
+           
       <div class="nhsuk-radios__item">
         <input name="@nameof(Model.HasProfessionalRegistrationNumber)"
                class="nhsuk-radios__input"
@@ -66,9 +71,16 @@
           Yes
         </label>
       </div>
-      <div class="nhsuk-radios__conditional @(optionYesSelected ? " " : " nhsuk-radios__conditional--hidden") @(professionalRegNumberErrorHasOccurred ? "form-group-wrapper--error" : "" )"
+            <div class="nhsuk-radios__conditional @(optionYesSelected ? " " : " nhsuk-radios__conditional--hidden") @(professionalRegNumberErrorHasOccurred ? "form-group-wrapper--error" : "")"
            id="@professionalRegConditionalId">
-        <vc:text-input asp-for="@nameof(Model.ProfessionalRegistrationNumber)"
+                @if (professionalRegistrationNumberError != null)
+                {
+                    <span class="nhsuk-error-message" id="ProfessionalRegistrationNumber-error">
+                        <span class="nhsuk-u-visually-hidden">Error:</span>
+                        @Html.Raw(professionalRegistrationNumberError)
+                    </span>
+                }
+                      <vc:text-input asp-for="@nameof(Model.ProfessionalRegistrationNumber)"
                        label="Professional Registration Number"
                        populate-with-current-value="true"
                        type="text"

DigitalLearningSolutions.Web/Views/TrackingSystem/Delegates/EditDelegate/Index.cshtml

@@ -15,7 +15,10 @@
   <div class="nhsuk-grid-column-full">
     @if (errorHasOccurred)
     {
-      <vc:error-summary order-of-property-names="@(new[] {
+            var professionalRegistrationNumberError = ViewData.ModelState["ProfessionalRegistrationNumber"]?.Errors.FirstOrDefault();
+            if (professionalRegistrationNumberError == null)
+            {
+                <vc:error-summary order-of-property-names="@(new[] {
                                                    nameof(Model.FirstName),
                                                    nameof(Model.LastName),
                                                    nameof(Model.CentreSpecificEmail),
@@ -28,6 +31,23 @@
                                                    nameof(Model.Answer4),
                                                    nameof(Model.Answer5),
                                                    nameof(Model.Answer6) })" />
+            }
+            if (professionalRegistrationNumberError != null)
+            {
+                <div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+                    <h2 class="nhsuk-error-summary__title" id="error-summary-title">
+                        There is a problem
+                    </h2>
+                    <div class="nhsuk-error-summary__body">
+                        <span class="nhsuk-error-message" id="ProfessionalRegistrationNumber-error">
+                            <span class="nhsuk-u-visually-hidden">Error:</span> <span class="nhsuk-error-message" id="ProfessionalRegistrationNumber-error">
+                                <span class="nhsuk-u-visually-hidden">Error:</span>
+                                @Html.Raw(professionalRegistrationNumberError.ErrorMessage)
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            }
     }
 
     <h1 class="nhsuk-heading-xl">Edit delegate details</h1>