TechnologyEnhancedLearning · jigneshjethwani-hee · Apr 20, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs
@@ -13,7 +13,9 @@ public IViewComponentResult Invoke(
             string type,
             string hintText,
             string cssClass,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default,
+            string? regularExClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -33,7 +35,9 @@ bool required
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage,
+                string.IsNullOrEmpty(regularExClientSideErrorMessage) ? null : regularExClientSideErrorMessage                
             );
             return View(numericInputViewModel);
         }

diff --git a/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs
@@ -14,7 +14,8 @@ public IViewComponentResult Invoke(
             IEnumerable<RadiosItemViewModel> radios,
             bool populateWithCurrentValues,
             string hintText,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var radiosList = radios.Select(
@@ -31,7 +32,8 @@ bool required
                 label,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 radiosList,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
 
             return View(viewModel);
@@ -42,7 +44,8 @@ private bool IsSelectedRadio(string aspFor, RadiosItemViewModel radioItem, bool
             var model = ViewData.Model;
             var property = model.GetType().GetProperty(aspFor);
             var value = property?.GetValue(model);
-            return populateWithCurrentValue && value.Equals(radioItem.Value);
+
+            return populateWithCurrentValue && value != null && value.Equals(radioItem.Value);
         }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs
@@ -15,7 +15,8 @@ public IViewComponentResult Invoke(
             IEnumerable<SelectListItem> selectListOptions,
             string? hintText,
             string? cssClass,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -36,7 +37,8 @@ bool required
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 errorMessage,
                 hasError,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
             return View(selectListViewModel);
         }

diff --git a/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs
@@ -17,6 +17,7 @@ public class TextAreaViewComponent : ViewComponent
         /// <param name="hintText">Leave blank for no hint.</param>
         /// <param name="cssClass"></param>
         /// <param name="characterCount"></param>
+        /// <param name="maxLengthClientSideErrorMessage"></param>
         /// <returns></returns>
         public IViewComponentResult Invoke(
             string aspFor,
@@ -26,7 +27,9 @@ public IViewComponentResult Invoke(
             bool spellCheck,
             string hintText,
             string cssClass,
-            int? characterCount)
+            int? characterCount,
+            string? maxLengthClientSideErrorMessage = default
+            )
         {
             var model = ViewData.Model;
 
@@ -42,7 +45,9 @@ public IViewComponentResult Invoke(
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
-                characterCount);
+                characterCount,
+                maxLengthClientSideErrorMessage
+                );
             return View(textBoxViewModel);
         }
     }

diff --git a/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs
@@ -19,6 +19,7 @@ public class TextInputViewComponent : ViewComponent
         /// <param name="cssClass"></param>
         /// <param name="required"></param>
         /// <param name="placeholderText"></param>
+        /// <param name="requiredClientErrorMessage"></param>
         /// <returns></returns>
         public IViewComponentResult Invoke(
             string aspFor,
@@ -29,8 +30,9 @@ public IViewComponentResult Invoke(
             string hintText,
             string autocomplete,
             string cssClass,
-            bool required,
-            string? placeholderText = null
+            bool required,            
+            string? placeholderText = null,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -53,7 +55,8 @@ public IViewComponentResult Invoke(
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 required,
-                string.IsNullOrEmpty(placeholderText) ? null : placeholderText
+                string.IsNullOrEmpty(placeholderText) ? null : placeholderText,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
             return View(textBoxViewModel);
         }

diff --git a/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs b/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs
@@ -16,7 +16,9 @@ public NumericInputViewModel(
             IEnumerable<string> errorMessages,
             string? cssClass = null,
             string? hintText = null,
-            bool required = false
+            bool required = false,
+            string? requiredClientSideErrorMessage = default,
+            string? regularExClientSideErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -31,6 +33,8 @@ public NumericInputViewModel(
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientSideErrorMessage;
+            RegularExClientSideErrorMessage = regularExClientSideErrorMessage;
         }
 
         public string Id { get; set; }
@@ -42,5 +46,7 @@ public NumericInputViewModel(
         public string? HintText { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
         public bool Required { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
+        public string? RegularExClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs b/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs
@@ -9,14 +9,16 @@ public RadiosViewModel(
             string label,
             string hintText,
             IEnumerable<RadiosItemViewModel> radios,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             AspFor = aspFor;
             Label = !required && !label.EndsWith("(optional)") ? label + " (optional)" : label;
             HintText = hintText;
             Radios = radios;
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientSideErrorMessage;
         }
 
         public string AspFor { get; set; }
@@ -27,5 +29,6 @@ bool required
 
         public IEnumerable<RadiosItemViewModel> Radios { get; set; }
         public bool Required { get; set; }
+        public string RequiredClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs b/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs
@@ -17,7 +17,8 @@ public SelectListViewModel
             string? hintText = null,
             string? errorMessage = null,
             bool hasError = false,
-            bool required = false
+            bool required = false,
+            string? requiredClientErrorMessage = default
         )
         {
             Id = id;
@@ -31,6 +32,7 @@ public SelectListViewModel
             ErrorMessage = errorMessage;
             HasError = hasError;
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientErrorMessage;
         }
 
         public string Id { get; set; }
@@ -44,5 +46,6 @@ public SelectListViewModel
         public string? ErrorMessage { get; set; }
         public bool HasError { get; set; }
         public bool Required { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs b/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs
@@ -16,7 +16,8 @@ public TextAreaViewModel
             IEnumerable<string> errorMessages,
             string? cssClass = null,
             string? hintText = null,
-            int? characterCount = null
+            int? characterCount = null,
+            string? maxLengthClientSideErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -32,6 +33,7 @@ public TextAreaViewModel
             CharacterCount = characterCount;
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
+            MaxLengthClientSideErrorMessage = maxLengthClientSideErrorMessage;
         }
 
         public string Id { get; set; }
@@ -45,5 +47,6 @@ public TextAreaViewModel
         public int? CharacterCount { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
         public bool HasError { get; set; }
+        public string MaxLengthClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs b/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs
@@ -17,7 +17,8 @@ public TextInputViewModel(
             string? cssClass = null,
             string? hintText = null,
             bool required = false,
-            string? placeholder = null
+            string? placeholder = null,
+            string? requiredSideClientErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -35,6 +36,7 @@ public TextInputViewModel(
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
             PlaceHolder = placeholder;
+            RequiredClientSideErrorMessage = requiredSideClientErrorMessage;
         }
 
         public string Id { get; set; }
@@ -50,6 +52,7 @@ public TextInputViewModel(
         public IEnumerable<string> ErrorMessages { get; set; }
         public readonly bool HasError;
         public string? PlaceHolder { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
     }
 
 }
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml
@@ -1,18 +1,33 @@
 @using NHSUKViewComponents.Web.ViewModels
 @model ErrorSummaryViewModel
 
-<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">
-    <ul class="nhsuk-list nhsuk-error-summary__list">
-      @foreach (var item in Model.Errors)
-      {
-        <li>
-          <a href="#@item.Key">@item.ErrorMessage</a>
-        </li>
-      }
-    </ul>
-  </div>
-</div>
+@if(Model.Errors.Any())
+{
+    <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">
+        <ul class="nhsuk-list nhsuk-error-summary__list">
+          @foreach (var item in Model.Errors)
+          {
+            <li>
+              <a href="#@item.Key">@item.ErrorMessage</a>
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+}
+else
+{
+    <div class="nhsuk-error-summary validation-summary-errors validation-summary-valid" data-valmsg-summary="true" 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">
+            <ul class="nhsuk-list nhsuk-error-summary__list">
+            </ul>
+        </div>
+    </div>
+}
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml
@@ -2,34 +2,45 @@
 @using NHSUKViewComponents.Web.Helpers
 @model NumericInputViewModel
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
-  <label class="nhsuk-label" for="@Model.Id">
-    @Model.Label
-  </label>
-  @if (Model.HintText != null)
-  {
-    <div class="nhsuk-hint" id="@Model.Name-hint">
-      @Html.Raw(Model.HintText)
-    </div>
-  }
-  @if (Model.HasError)
-  {
-    <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
-      @foreach (var errorMessage in Model.ErrorMessages)
-      {
-        <span class="error-message--margin-bottom-1 nhsuk-error-message">
-          <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
-        </span>
-      }
-    </div>
-  }
-  <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
-         id="@Model.Id"
-         name="@Model.Name"
-         value="@Model.Value"
-         type="@Model.Type"
-         pattern="[0-9]*"
-         inputmode="numeric"
-         aria-invalid="@(Model.HasError ? "true" : null)"
-         aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
-         aria-required="@(Model.Required ? "true" : "false" )" />
+    <label class="nhsuk-label" for="@Model.Id">
+        @Model.Label
+    </label>
+    @if (Model.HintText != null)
+    {
+        <div class="nhsuk-hint" id="@Model.Name-hint">
+            @Html.Raw(Model.HintText)
+        </div>
+    }
+    @if (Model.HasError)
+    {
+        <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+            @foreach (var errorMessage in Model.ErrorMessages)
+            {
+                <span class="error-message--margin-bottom-1 nhsuk-error-message">
+                    <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
+                </span>
+            }
+        </div>
+    }
+
+    if(!Model.HasError)
+    {
+        <div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+        </div>
+    }
+
+    <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
+           id="@Model.Id"
+           name="@Model.Name"
+           value="@Model.Value"
+           type="@Model.Type"
+           pattern="[0-9]*"
+           inputmode="numeric"
+           aria-invalid="@(Model.HasError ? "true" : null)"
+           aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
+           aria-required="@(Model.Required ? "true" : "false" )"
+           data-val-regex-pattern="[0-9]*"
+           data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
+           data-val-regex="@Model.RegularExClientSideErrorMessage"
+           data-val="@(Model.Required ? "true" : "false" )" />
 </div>