Merge pull request #32 from sagrawal31/error-msg-fixes

Error message fixes & improvements
sagrawal31 · Apr 20, 2017 · e1814ae · e1814ae
2 parents db90438 + eee3024
commit e1814ae
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 18 deletions.
diff --git a/dist/bootstrap-angular-validation-all.min.js b/dist/bootstrap-angular-validation-all.min.js
diff --git a/dist/bootstrap-angular-validation-core.min.js b/dist/bootstrap-angular-validation-core.min.js
diff --git a/dist/bootstrap-angular-validation-simple.min.js b/dist/bootstrap-angular-validation-simple.min.js
diff --git a/src/app.provider.js b/src/app.provider.js
@@ -27,6 +27,7 @@ angular.module('bootstrap.angular.validation').provider('bsValidationConfig', fu
   this.global.errorMessagePrefix = '';
   this.global.tooltipPlacement = 'bottom-left';
   this.global.tooltipAppendToBody = false;
+  this.global.suppressWarnings = false;
 
   this.global.messages = {
     required: 'This field is required.',
@@ -86,6 +87,7 @@ angular.module('bootstrap.angular.validation').provider('bsValidationConfig', fu
       messages: _this.global.messages,
       errorClass: _this.global.errorClass,
       successClass: _this.global.successClass,
+      suppressWarnings: _this.global.suppressWarnings,
       tooltipAppendToBody: _this.global.tooltipAppendToBody,
 
       getDisplayErrorsAs: function () {

diff --git a/src/directives/validation.directive.js b/src/directives/validation.directive.js
@@ -8,7 +8,8 @@
  * @requires BsValidationService
  */
 angular.module('bootstrap.angular.validation').directive('bsValidation', [
-  '$timeout', '$injector', 'BsValidationService', function ($timeout, $injector, validationService) {
+  '$timeout', '$injector', 'BsValidationService', 'bsValidationConfig',
+  function ($timeout, $injector, validationService, bsValidationConfig) {
     return {
       restrict: 'A',
       require: ['?ngModel', '?^^form'],
@@ -22,12 +23,18 @@ angular.module('bootstrap.angular.validation').directive('bsValidation', [
         var ngFormController = controllers[1];
 
         if (!ngModelController) {
-          throw 'ng-model directive is required for the bs-validation directive to work.';
+          if (!bsValidationConfig.suppressWarnings) {
+            console.warn('ng-model directive is required for the bs-validation directive to work.');
+          }
+          return;
         }
 
         var $formGroupElement = validationService.getFormGroupElement($element);
         if (!$formGroupElement) {
-          throw 'No parent form group element found for input element';
+          if (!bsValidationConfig.suppressWarnings) {
+            console.warn('No parent form group element found for input element');
+          }
+          return;
         }
 
         var displayValidationState = false;

diff --git a/src/services/simple.message.service.js b/src/services/simple.message.service.js
@@ -5,9 +5,20 @@ angular.module('bootstrap.angular.validation').factory('simpleMessageService', [
   var errorElementClass = '.bs-invalid-msg';
 
   function getErrorContainer($element, $formGroupElement) {
-    var $errorElement = $formGroupElement.find(errorElementClass);
-    if ($errorElement && $errorElement.length) {
-      return $errorElement;
+    var $errorContainer;
+
+    // If input element has "id" attribute
+    if ($element.attr('id')) {
+      // Then first try to find the error container with the same id prefixed with "bs-error-"
+      $errorContainer = $formGroupElement.find('#bs-error-' + $element.attr('id'));
+      if ($errorContainer && $errorContainer.length) {
+        return $errorContainer;
+      }
+    }
+
+    $errorContainer = $formGroupElement.find(errorElementClass);
+    if ($errorContainer && $errorContainer.length) {
+      return $errorContainer;
     }
 
     var insertAfter;
@@ -20,8 +31,15 @@ angular.module('bootstrap.angular.validation').factory('simpleMessageService', [
       insertAfter = $element;
     }
 
-    insertAfter.after('<span class="help-block ' + errorElementClass.substring(1) + '"></span>');
-    return $formGroupElement.find(errorElementClass);
+    var errorContainerHTML = '<span class="help-block ' + errorElementClass.substring(1) + '" ';
+    if ($element.attr('id')) {
+      errorContainerHTML += 'id="bs-error-' + $element.attr('id') + '"';
+    }
+    errorContainerHTML += '></span>';
+    $errorContainer = angular.element(errorContainerHTML);
+
+    insertAfter.after($errorContainer);
+    return $errorContainer;
   }
 
   return {
@@ -31,14 +49,16 @@ angular.module('bootstrap.angular.validation').factory('simpleMessageService', [
 
     hideErrorMessage: function ($element, $formGroupElement) {
       validationService.removeErrorClass($formGroupElement);
-      $formGroupElement.find(errorElementClass).addClass('ng-hide');
+
+      var $errorContainer = getErrorContainer($element, $formGroupElement);
+      $errorContainer.html('').addClass('ng-hide');
     },
 
     showErrorMessage: function ($element, $attr, ngModelController, $formGroupElement) {
       var message = validationService.getErrorMessage($element, $attr, ngModelController);
 
-      var $errorElement = getErrorContainer($element, $formGroupElement);
-      $errorElement.html(message).removeClass('ng-hide');
+      var $errorContainer = getErrorContainer($element, $formGroupElement);
+      $errorContainer.html(message).removeClass('ng-hide');
     }
   };
 }]);
diff --git a/src/services/validation.service.js b/src/services/validation.service.js
@@ -151,12 +151,12 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
       },
 
       getFormGroupElement: function ($element) {
-        // Search parent element with class form-group to operate on.
-        var formGroupElement = $element.parents(formGroupClass);
+        // First search for an attribute with 'bs-form-group'
+        var formGroupElement = $element.parents(customFormGroup);
 
-        // Search for an attribute 'bs-form-group' if the class '.form-group' is not available
         if (!formGroupElement || formGroupElement.length === 0) {
-          formGroupElement = $element.parents(customFormGroup);
+          // Then search for parent element with class form-group
+          formGroupElement = $element.parents(formGroupClass);
 
           if (!formGroupElement || formGroupElement.length === 0) {
             return null;