Merge pull request #37 from TechnologyEnhancedLearning/Develop/Fixes/TD-4180-DIG409-An-error-is-present-and-correct-however-is-not-programmatically-associatedwith-field

TD-4180: Moved client side validations to server side.

Author: ArunimaGeorge

NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml

@@ -55,7 +55,6 @@
                            name="@Model.DayId"
                            value="@Model.DayValue"
                            type="text"
-                           pattern="[0-9]*"
                            min="1"
                            max="31"
                            step="1"
@@ -71,7 +70,6 @@
                            name="@Model.MonthId"
                            value="@Model.MonthValue"
                            type="text"
-                           pattern="[0-9]*"
                            min="1"
                            max="12"
                            step="1"
@@ -87,49 +85,13 @@
                            name="@Model.YearId"
                            value="@Model.YearValue"
                            type="text"
-                           pattern="[0-9]*"
                            min="1900"
                            max="9999"
                            step="1"
                            inputmode="numeric"
                            aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
-            <span id="date-error" class="error-message--margin-bottom-1 nhsuk-error-message" aria-live="polite" style="visibility: hidden;">
-            </span>
         </div>
     </fieldset>
-    <script>
-        const fields = [@Model.DayId, @Model.MonthId, @Model.YearId];
-
-        const errorElement = document.getElementById('date-error');
-        for (let field of fields) {
-            const inputElement = document.getElementById(field.id);
-
-            inputElement.addEventListener('input', function (event) {
-
-                if (event.inputType === 'deleteContentBackward') {
-                    return;
-                }
-
-                const value = event.data;
-                const min = parseInt(inputElement.getAttribute('min'));
-                const max = parseInt(inputElement.getAttribute('max'));
-
-                inputElement.setAttribute('aria-invalid', 'false');
-                errorElement.textContent = '';
-                errorElement.style.visibility = 'hidden';
-
-                setTimeout(function () {
-                    if (value < 1 || value > max || !value.match(/^[0-9]*$/)) {
-                        inputElement.value = inputElement.value.slice(0, -1) + 1;
-                        inputElement.value = inputElement.value.slice(0, -1);
-                        inputElement.setAttribute('aria-invalid', 'true');
-                        errorElement.textContent = `Invalid input. Please enter a number between ${min} and ${max}.`;
-                        errorElement.style.visibility = 'visible';
-                    }
-                }, 0);
-            });
-        }
-    </script>
 </div>

NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml

@@ -9,7 +9,7 @@
 
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
 
-    <fieldset class="nhsuk-fieldset" aria-describedby="@(!string.IsNullOrEmpty(Model.HintText) ? $"{Model.Label.RemoveWhitespace()}-hint" : string.Empty)">
+    <fieldset id="@Model.AspFor" class="nhsuk-fieldset" aria-describedby="@(!string.IsNullOrEmpty(Model.HintText) ? $"{Model.Label.RemoveWhitespace()}-hint" : string.Empty)">
         <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
             @if (Model.IsPageHeading.GetValueOrDefault() == true)
             {
@@ -131,19 +131,4 @@
 
         </div>
     </fieldset>
-    <script>
-        window.onload = function() {
-            const id = "@Model.AspFor";
-            const radioForm = document.querySelector("main form[novalidate='novalidate']");
-            radioForm.addEventListener("submit", () => {
-                const errorMessageParent = document.querySelector("div[data-valmsg-for='" + id + "']");
-                const errorMessage = errorMessageParent.innerHTML;
-                errorMessageParent.innerHTML = "";
-
-                setTimeout(function () {
-                    errorMessageParent.innerHTML = errorMessage;
-                }, 0);
-            });
-        };
-    </script>
 </div>