Make page focus on top-most element with validation error

Author: akdalin-hee

LearningHub.Nhs.WebUI/Views/Shared/_ValidationScriptsPartial.cshtml

@@ -1,46 +1,62 @@
 <environment include="Development">
-  <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
-  <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
+    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
+    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
 </environment>
 <environment exclude="Development">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
-          asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
-          asp-fallback-test="window.jQuery && window.jQuery.validator"
-          crossorigin="anonymous"
-          integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=">
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
-          asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
-          asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
-          crossorigin="anonymous"
-          integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
-  </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
+            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
+            asp-fallback-test="window.jQuery && window.jQuery.validator"
+            crossorigin="anonymous"
+            integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
+            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
+            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
+            crossorigin="anonymous"
+            integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
+    </script>
 </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)
-      }
+    // Add/remove class 'input-validation-error' to the div containing the control with error
+
+    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>