Merge pull request #77 from TechnologyEnhancedLearning/Develop/Fixes/TD-4184-DIG414-Focus-doesn't-move-to-field-or-error-on-submit

TD-4184: DIG414: Focus doesn't move to field or error on submit

Author: Swapnamol

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>