added unit tests around the custom trigger option

Author: paulyoder

CHANGELOG.md

@@ -3,6 +3,9 @@
 * Breaking Changes
   * Added a more specific selector query for the input element. The input element must now also have the 'form-control' class associated with it. Thanks @martindederer
 
+* Enhancements
+  * Added `trigger` option to provide a custom trigger to validate the value. By default the trigger is the `blur` event. Thanks @TEmplarian
+
 ### 1.1.0
 
 * Enhancements

README.md

@@ -95,7 +95,7 @@ app.config(['showErrorsConfigProvider', function(showErrorsConfigProvider) {
 }]);
 ```
 
-##### By Input
+##### By Input Element
 If you only want to show valid values on specific inputs, then you can pass in the `{ showSuccess: true }` option like the example below shows.
 
 ```html
@@ -105,6 +105,29 @@ If you only want to show valid values on specific inputs, then you can pass in t
   </div>
 </form>
 ```
+
+Custom Trigger
+---
+By default, the validation is not performed until the `blur` event is trigger on the input 
+element. However, there are some scenarios where this is not desirable, so it's possible to 
+override this with the `trigger` option.
+
+##### By Input Element
+```html
+<form name="userForm">
+  <div class="form-group" show-errors="{ trigger: 'keypress' }">
+    <input ng-model="firstName" ng-pattern="/^foo$/" ng-required name="firstName" class="form-control" type="text" />
+  </div>
+</form>
+```
+
+##### Globally
+```javascript
+app = angular.module('yourApp', ['ui.bootstrap.showErrors']);
+app.config(['showErrorsConfigProvider', function(showErrorsConfigProvider) {
+  showErrorsConfigProvider.trigger('keypress');
+}]);
+```
 
 ## Development
 

src/showErrors.js

@@ -5,7 +5,15 @@
 
   showErrorsModule.directive('showErrors', [
     '$timeout', 'showErrorsConfig', function($timeout, showErrorsConfig) {
-      var getShowSuccess, linkFn;
+      var getShowSuccess, getTrigger, linkFn;
+      getTrigger = function(options) {
+        var trigger;
+        trigger = showErrorsConfig.trigger;
+        if (options && (options.trigger != null)) {
+          trigger = options.trigger;
+        }
+        return trigger;
+      };
       getShowSuccess = function(options) {
         var showSuccess;
         showSuccess = showErrorsConfig.showSuccess;
@@ -15,17 +23,18 @@
         return showSuccess;
       };
       linkFn = function(scope, el, attrs, formCtrl) {
-        var blurred, inputEl, inputName, inputNgEl, options, showSuccess, toggleClasses;
+        var blurred, inputEl, inputName, inputNgEl, options, showSuccess, toggleClasses, trigger;
         blurred = false;
         options = scope.$eval(attrs.showErrors);
         showSuccess = getShowSuccess(options);
+        trigger = getTrigger(options);
         inputEl = el[0].querySelector('.form-control[name]');
         inputNgEl = angular.element(inputEl);
         inputName = inputNgEl.attr('name');
         if (!inputName) {
           throw "show-errors element has no child input elements with a 'name' attribute and a 'form-control' class";
         }
-        inputNgEl.bind('blur', function() {
+        inputNgEl.bind(trigger, function() {
           blurred = true;
           return toggleClasses(formCtrl[inputName].$invalid);
         });
@@ -68,14 +77,19 @@
   ]);
 
   showErrorsModule.provider('showErrorsConfig', function() {
-    var _showSuccess;
+    var _showSuccess, _trigger;
     _showSuccess = false;
+    _trigger = 'blur';
     this.showSuccess = function(showSuccess) {
       return _showSuccess = showSuccess;
     };
+    this.trigger = function(trigger) {
+      return _trigger = trigger;
+    };
     this.$get = function() {
       return {
-        showSuccess: _showSuccess
+        showSuccess: _showSuccess,
+        trigger: _trigger
       };
     };
   });

src/showErrors.min.js

@@ -228,6 +228,7 @@ describe 'showErrorsConfig', ->
     testModule = angular.module 'testModule', []
     testModule.config (showErrorsConfigProvider) ->
       showErrorsConfigProvider.showSuccess true
+      showErrorsConfigProvider.trigger 'keypress'
 
     module 'ui.bootstrap.showErrors', 'testModule'
 
@@ -240,7 +241,7 @@ describe 'showErrorsConfig', ->
   compileEl = ->
     el = $compile(
         '<form name="userForm">
-          <div id="first-name-group" class="form-group" show-errors="{showSuccess: false}">
+          <div id="first-name-group" class="form-group" show-errors="{showSuccess: false, trigger: \'blur\'}">
             <input type="text" name="firstName" ng-model="firstName" ng-minlength="3" class="form-control" />
           </div>
           <div id="last-name-group" class="form-group" show-errors>
@@ -257,7 +258,7 @@ describe 'showErrorsConfig', ->
       it 'show-success class is applied', ->
         el = compileEl()
         $scope.userForm.lastName.$setViewValue validName
-        angular.element(lastNameEl(el)).triggerHandler 'blur'
+        angular.element(lastNameEl(el)).triggerHandler 'keypress'
         $scope.$digest()
         expectLastNameFormGroupHasSuccessClass(el).toBe true
 
@@ -270,6 +271,23 @@ describe 'showErrorsConfig', ->
         $scope.$digest()
         expectFirstNameFormGroupHasSuccessClass(el).toBe false
 
+  describe 'when showErrorsConfig.trigger is "keypress"', ->
+    describe 'and no options given', ->
+      it 'validates the value on the first keypress', ->
+        el = compileEl()
+        $scope.userForm.lastName.$setViewValue invalidName
+        angular.element(lastNameEl(el)).triggerHandler 'keypress'
+        $scope.$digest()
+        expectLastNameFormGroupHasErrorClass(el).toBe true
+
+    describe 'but options.trigger is "blur"', ->
+      it 'does not validate the value on keypress', ->
+        el = compileEl()
+        $scope.userForm.firstName.$setViewValue invalidName
+        angular.element(firstNameEl(el)).triggerHandler 'keypress'
+        $scope.$digest()
+        expectFirstNameFormGroupHasErrorClass(el).toBe false
+
 find = (el, selector) ->
   el[0].querySelector selector
 
@@ -290,3 +308,11 @@ expectFirstNameFormGroupHasSuccessClass = (el) ->
 expectLastNameFormGroupHasSuccessClass = (el) ->
   formGroup = el[0].querySelector '[id=last-name-group]'
   expect angular.element(formGroup).hasClass('has-success')
+
+expectFirstNameFormGroupHasErrorClass = (el) ->
+  formGroup = el[0].querySelector '[id=first-name-group]'
+  expect angular.element(formGroup).hasClass('has-error')
+
+expectLastNameFormGroupHasErrorClass = (el) ->
+  formGroup = el[0].querySelector '[id=last-name-group]'
+  expect angular.element(formGroup).hasClass('has-error')

test/showErrors.spec.coffee

@@ -1,5 +1,5 @@
 (function() {
-  var expectFirstNameFormGroupHasSuccessClass, expectFormGroupHasErrorClass, expectLastNameFormGroupHasSuccessClass, find, firstNameEl, lastNameEl;
+  var expectFirstNameFormGroupHasErrorClass, expectFirstNameFormGroupHasSuccessClass, expectFormGroupHasErrorClass, expectLastNameFormGroupHasErrorClass, expectLastNameFormGroupHasSuccessClass, find, firstNameEl, lastNameEl;
 
   describe('showErrors', function() {
     var $compile, $scope, $timeout, compileEl, invalidName, validName;
@@ -280,7 +280,8 @@
       var testModule;
       testModule = angular.module('testModule', []);
       testModule.config(function(showErrorsConfigProvider) {
-        return showErrorsConfigProvider.showSuccess(true);
+        showErrorsConfigProvider.showSuccess(true);
+        return showErrorsConfigProvider.trigger('keypress');
       });
       module('ui.bootstrap.showErrors', 'testModule');
       return inject(function(_$compile_, _$rootScope_, _$timeout_) {
@@ -292,7 +293,7 @@
     compileEl = function() {
       var el;
       el = $compile('<form name="userForm">\
-          <div id="first-name-group" class="form-group" show-errors="{showSuccess: false}">\
+          <div id="first-name-group" class="form-group" show-errors="{showSuccess: false, trigger: \'blur\'}">\
             <input type="text" name="firstName" ng-model="firstName" ng-minlength="3" class="form-control" />\
           </div>\
           <div id="last-name-group" class="form-group" show-errors>\
@@ -309,13 +310,13 @@
           var el;
           el = compileEl();
           $scope.userForm.lastName.$setViewValue(validName);
-          angular.element(lastNameEl(el)).triggerHandler('blur');
+          angular.element(lastNameEl(el)).triggerHandler('keypress');
           $scope.$digest();
           return expectLastNameFormGroupHasSuccessClass(el).toBe(true);
         });
       });
     });
-    return describe('when showErrorsConfig.showSuccess is true', function() {
+    describe('when showErrorsConfig.showSuccess is true', function() {
       return describe('but options.showSuccess is false', function() {
         return it('show-success class is not applied', function() {
           var el;
@@ -327,6 +328,28 @@
         });
       });
     });
+    return describe('when showErrorsConfig.trigger is "keypress"', function() {
+      describe('and no options given', function() {
+        return it('validates the value on the first keypress', function() {
+          var el;
+          el = compileEl();
+          $scope.userForm.lastName.$setViewValue(invalidName);
+          angular.element(lastNameEl(el)).triggerHandler('keypress');
+          $scope.$digest();
+          return expectLastNameFormGroupHasErrorClass(el).toBe(true);
+        });
+      });
+      return describe('but options.trigger is "blur"', function() {
+        return it('does not validate the value on keypress', function() {
+          var el;
+          el = compileEl();
+          $scope.userForm.firstName.$setViewValue(invalidName);
+          angular.element(firstNameEl(el)).triggerHandler('keypress');
+          $scope.$digest();
+          return expectFirstNameFormGroupHasErrorClass(el).toBe(false);
+        });
+      });
+    });
   });
 
   find = function(el, selector) {
@@ -359,4 +382,16 @@
     return expect(angular.element(formGroup).hasClass('has-success'));
   };
 
+  expectFirstNameFormGroupHasErrorClass = function(el) {
+    var formGroup;
+    formGroup = el[0].querySelector('[id=first-name-group]');
+    return expect(angular.element(formGroup).hasClass('has-error'));
+  };
+
+  expectLastNameFormGroupHasErrorClass = function(el) {
+    var formGroup;
+    formGroup = el[0].querySelector('[id=last-name-group]');
+    return expect(angular.element(formGroup).hasClass('has-error'));
+  };
+
 }).call(this);