From b261802f81601294defa4691d19213ee089823fc Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Fri, 29 Nov 2024 16:46:42 +0000
Subject: [PATCH] TD-4184: DIG414: Focus doesn't move to field or error on
 submit

---
 .../Shared/_ValidationScriptsPartial.cshtml   | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/Auth/LearningHub.Nhs.Auth/Views/Shared/_ValidationScriptsPartial.cshtml b/Auth/LearningHub.Nhs.Auth/Views/Shared/_ValidationScriptsPartial.cshtml
index aa6f898..444c35a 100644
--- a/Auth/LearningHub.Nhs.Auth/Views/Shared/_ValidationScriptsPartial.cshtml
+++ b/Auth/LearningHub.Nhs.Auth/Views/Shared/_ValidationScriptsPartial.cshtml
@@ -18,29 +18,44 @@
 </environment>
 <script type="text/javascript">
   // Add/remove class 'input-validation-error' to the div containing the control with error
-  $(function () {
-    $('form').each(function () {
-      if ($(this).data("validator")) {
-        var valSettings = $(this).data("validator").settings
-        valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
-        valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
-      }
+
+    let errorElements = [];
+    let submitAttempted = false;
+    document.querySelector('form').onsubmit = () => { submitAttempted = true; }
+ 
+    $(function () {
+        $('form').each(function () {
+            if ($(this).data("validator")) {
+                var valSettings = $(this).data("validator").settings;
+                 valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator);
+                valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator);
+            }
+        });
     });
-  });
 
-  function wrap(functionToWrap, beforeFunction) {
-    return function () {
-      var args = Array.prototype.slice.call(arguments);
-      beforeFunction.apply(this, args);
-      return functionToWrap.apply(this, args);
+   function wrap(functionToWrap, beforeFunction) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            beforeFunction.apply(this, args);
+            if (errorElements.length && submitAttempted) {
+               errorElements[0]['obj'].focus();
+                submitAttempted = false;
+            }
+
+            return functionToWrap.apply(this, args);
+        };
     };
-  };
 
-  function highlightDecorator(element, errorClass, validClass) {
-    $(element).closest("div").addClass(errorClass).removeClass(validClass);
-  }
-  function unhighlightDecorator(element, errorClass, validClass) {
-    $(element).closest("div").addClass(validClass).removeClass(errorClass);
-  }
+    function highlightDecorator(element, errorClass, validClass) {
+        $(element).closest("div").addClass(errorClass).removeClass(validClass);
+        let itemExists = errorElements.some(obj => obj['id'] == element.id);
+        if (!itemExists) {
+            errorElements.push({ 'id': element.id, 'obj': element });
+        }
+    }
+    function unhighlightDecorator(element, errorClass, validClass) {
+        $(element).closest("div").addClass(validClass).removeClass(errorClass);
+        errorElements = errorElements.filter((elm) => elm.id != element.id);
+    }
 
 </script>
\ No newline at end of file