Merge pull request #111 from Cosium/fix-110

#110 Add an option to automatically scroll to the first faulty input

Author: jonsamwell

src/providers/validator.js

@@ -2,6 +2,7 @@ function ValidatorFn() {
   var elementStateModifiers = {},
     enableValidElementStyling = true,
     enableInvalidElementStyling = true,
+    enableFirstInvalidElementScrollingOnSubmit = false,
     validationEnabled = true,
 
     toBoolean = function (value) {
@@ -236,6 +237,25 @@ function ValidatorFn() {
     enableInvalidElementStyling = enabled;
   };
 
+  /**
+   * @ngdoc function
+   * @name validator#setFirstInvalidElementScrollingOnSubmit
+   * @methodOf validator
+   *
+   * @description
+   * Globally enables first invalid element scrolling on form submit. This is disabled by default.
+   *
+   * @param enabled {Boolean} enabled True to enable scrolling otherwise false.
+   */
+  this.setFirstInvalidElementScrollingOnSubmit = function (enabled) {
+    enableFirstInvalidElementScrollingOnSubmit = enabled;
+  };
+
+  this.firstInvalidElementScrollingOnSubmitEnabled = function () {
+    return enableFirstInvalidElementScrollingOnSubmit;
+  };
+
+
   this.getDomModifier = function (el) {
     var modifierKey = (el !== undefined ? el.attr('element-modifier') : this.defaultElementModifier) ||
       (el !== undefined ? el.attr('data-element-modifier') : this.defaultElementModifier) ||

src/services/validationManager.js

@@ -8,7 +8,7 @@ function ElementUtilsFn() {
   };
 }
 
-function ValidationManagerFn(validator, elementUtils) {
+function ValidationManagerFn(validator, elementUtils, $anchorScroll) {
   var elementTypesToValidate = ['input', 'textarea', 'select', 'form'],
 
     elementIsVisible = function (el) {
@@ -162,6 +162,12 @@ function ValidationManagerFn(validator, elementUtils) {
               ctrlFormOptions.forceValidation = force;
               try {
                 isValid = validateElement(controller, ctrlElement, ctrlFormOptions);
+                if (validator.firstInvalidElementScrollingOnSubmitEnabled() && !isValid && frmValid) {
+                  var ctrlElementId = ctrlElement.attr('id');
+                  if (ctrlElementId) {
+                    $anchorScroll(ctrlElementId);
+                  }
+                }
                 frmValid = frmValid && isValid;
               } finally {
                 ctrlFormOptions.forceValidation = originalForceValue;
@@ -223,7 +229,8 @@ function ValidationManagerFn(validator, elementUtils) {
 
 ValidationManagerFn.$inject = [
   'validator',
-  'jcs-elementUtils'
+  'jcs-elementUtils',
+  '$anchorScroll'
 ];
 
 angular.module('jcs-autoValidate').factory('jcs-elementUtils', ElementUtilsFn);

tests/services/validationManager.spec.js

@@ -2,7 +2,7 @@
   'use strict';
 
   describe('jcs-autoValidate validationManager', function () {
-    var sandbox, $rootScope, $compile, $q, validator, validationManager, modelCtrl, defer, elementUtils,
+    var sandbox, $rootScope, $compile, $q, validator, validationManager, modelCtrl, defer, elementUtils, $anchorScroll,
       setModelCtrl = function () {
         modelCtrl = {
           $parsers: [],
@@ -35,15 +35,23 @@
     beforeEach(module('jcs-autoValidate'));
 
     describe('validationManager', function () {
-      beforeEach(inject(function ($injector) {
+      beforeEach(function () {
         sandbox = sinon.sandbox.create();
+      });
+
+      beforeEach(module('jcs-autoValidate', function ($provide) {
+        $provide.value('$anchorScroll', sandbox.stub());
+      }));
+
+      beforeEach(inject(function ($injector) {
         $rootScope = $injector.get('$rootScope');
         $compile = $injector.get('$compile');
         $q = $injector.get('$q');
         defer = $q.defer();
         validator = $injector.get('validator');
         validationManager = $injector.get('validationManager');
         elementUtils = $injector.get('jcs-elementUtils');
+        $anchorScroll = $injector.get('$anchorScroll');
 
         sandbox.stub(validator, 'makeValid');
         sandbox.stub(validator, 'makeInvalid');
@@ -439,6 +447,75 @@
 
           expect(validator.makeInvalid.calledOnce).to.equal(true);
         });
+
+        it('should call $anchorScroll to first invalid element when the option is disabled', function () {
+          var frm = compileElement('<form name="frm1" ng-submit=""></form>', true),
+            inpt = compileElement('<input type="text" ng-model="name" required="required" ng-minlength="2" />', true);
+
+
+          sandbox.stub(elementUtils, 'isElementVisible').returns(true);
+          sandbox.stub(validator, 'firstInvalidElementScrollingOnSubmitEnabled').returns(false);
+          frm.append(inpt);
+          $rootScope.$apply();
+
+          frm.on('submit', function (event) {
+            event.preventDefault();
+          });
+
+          defer.resolve('errorMsg');
+          frm.trigger('submit');
+
+          $rootScope.$apply();
+
+          expect($anchorScroll.notCalled).to.equal(true);
+        });
+
+        it('should call $anchorScroll with first invalid element id when the option is enabled', function () {
+          var frm = compileElement('<form name="frm1" ng-submit=""></form>', true),
+            firstInpt = compileElement('<input type="text" id="first" ng-model="name" required="required" ng-minlength="2" />', true),
+            secondInpt = compileElement('<input type="text" id="second" ng-model="description" required="required" ng-minlength="2" />', true);
+
+
+          sandbox.stub(elementUtils, 'isElementVisible').returns(true);
+          sandbox.stub(validator, 'firstInvalidElementScrollingOnSubmitEnabled').returns(true);
+          frm.append(firstInpt);
+          frm.append(secondInpt);
+          $rootScope.$apply();
+
+          frm.on('submit', function (event) {
+            event.preventDefault();
+          });
+
+          defer.resolve('errorMsg');
+          frm.trigger('submit');
+
+          $rootScope.$apply();
+
+          expect($anchorScroll.calledOnce).to.equal(true);
+          expect($anchorScroll.calledWith('first')).to.equal(true);
+        });
+
+        it('should not call $anchorScroll with an undefined id', function () {
+          var frm = compileElement('<form name="frm1" ng-submit=""></form>', true),
+            firstInpt = compileElement('<input type="text" ng-model="name" required="required" ng-minlength="2" />', true);
+
+
+          sandbox.stub(elementUtils, 'isElementVisible').returns(true);
+          sandbox.stub(validator, 'firstInvalidElementScrollingOnSubmitEnabled').returns(true);
+          frm.append(firstInpt);
+          $rootScope.$apply();
+
+          frm.on('submit', function (event) {
+            event.preventDefault();
+          });
+
+          defer.resolve('errorMsg');
+          frm.trigger('submit');
+
+          $rootScope.$apply();
+
+          expect($anchorScroll.notCalled).to.equal(true);
+        });
       });
 
       describe('resetForm', function () {