Merge pull request #31 from sagrawal14/validation-classes

Ability to distinguish between different type of errors

Author: sagrawal31

bootstrap-angular-validation.iml

@@ -5,6 +5,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.idea" />
       <excludeFolder url="file://$MODULE_DIR$/bower_components" />
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
       <excludeFolder url="file://$MODULE_DIR$/node_modules" />
     </content>
     <orderEntry type="inheritedJdk" />

bower.json

@@ -1,7 +1,9 @@
 {
   "name": "bootstrap-angular-validation",
   "description": "Bootstrap form validation in Angular like jQuery but w/o jQuery.",
-  "main": "dist/bootstrap-angular-validation.min.js",
+  "main": [
+    "dist/bootstrap-angular-validation-all.min.js"
+  ],
   "dependencies": { },
   "devDependencies": {
     "angular": "^1.5.5"
@@ -15,6 +17,7 @@
     "**/.*",
     "node_modules",
     "bower_components",
+    "test-app",
     "src"
   ],
   "repository": {

dist/bootstrap-angular-validation-all.min.js

@@ -40,10 +40,11 @@ angular.module('bootstrap.angular.validation').directive('bsValidation', [
             var validationMessageService = validationService.getValidationMessageService(displayErrorAs);
 
             // Register generic custom validators if added to element
-            angular.forEach(validationService.getValidators(), function(key) {
+            angular.forEach(validationService.getValidators(), function(validator) {
+              var key = validator.name;
               var attrValue = $element.attr(key);
               if ($attr[key] || (angular.isDefined(attrValue) && attrValue !== false)) {
-                validationService.addValidator($scope, $attr, ngModelController, key);
+                validationService.addValidator($scope, $element, $attr, ngModelController, validator);
               }
             });
 
@@ -78,6 +79,8 @@ angular.module('bootstrap.angular.validation').directive('bsValidation', [
             }
 
             function displayOrHideValidationState() {
+              validationService.toggleErrorKeyClasses($formGroupElement, ngModelController.$error);
+
               if (!displayValidationState) {
                 hideSuccess();
                 return hideError();

dist/bootstrap-angular-validation-core.min.js

@@ -12,29 +12,42 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
   var customFormGroup = '[bs-form-group]';
   var formGroupClass = '.form-group';
 
-  var genericValidators = {
-    digits: function(value) {
+  var _genericValidators = [{
+    name: 'digits',
+    validateFn: function(value) {
       return (/^\d+$/).test(value);
-    },
-    equalto: function(value, $scope, attr) {
+    }
+  }, {
+    name: 'equalto',
+    validateFn: function(value, $scope, attr) {
       return value + '' === $scope.$eval(attr.equalto) + '';
-    },
-    number: function(value) {
+    }
+  }, {
+    name: 'number',
+    validateFn: function(value) {
       return (/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/).test(value);
-    },
-    min: function(value, $scope, attr) {
+    }
+  }, {
+    name: 'min',
+    validateFn: function(value, $scope, attr) {
       return parseFloat(value) >= parseFloat(attr.min);
-    },
-    max: function(value, $scope, attr) {
+    }
+  }, {
+    name: 'max',
+    validateFn: function(value, $scope, attr) {
       return parseFloat(value) <= parseFloat(attr.max);
-    },
-    length: function(value, $scope, attr) {
+    }
+  }, {
+    name: 'length',
+    validateFn: function(value, $scope, attr) {
       return value.length === parseInt(attr.length);
-    },
-    strictemail: function(value) {
+    }
+  }, {
+    name: 'strictemail',
+    validateFn: function(value) {
       return new RegExp(/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/).test(value);
     }
-  };
+  }];
 
   function getTrigger($element, triggerEvent) {
     var attributeName = 'bs-trigger';
@@ -51,17 +64,17 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
     return validationConfig.shouldValidateOn(triggerEvent);
   }
 
+  function removeClassByPrefix(element, prefix) {
+    var regx = new RegExp('\\b' + prefix + '.*\\b', 'g');
+    element[0].className = element[0].className.replace(regx, '').replace(/\s\s+/g, ' ');
+    return element;
+  }
+
   var meta = ['matchName'];
 
   return {
-    /**
-     * Search all the input element inside the given DOM element and apply the 'bs-validation' directive so we
-     * need not a add it for every form element.
-     */
     getValidators: function() {
-      var builtIn = ['equalto', 'min', 'max', 'number', 'digits', 'length'];
-      var additional = Object.keys(genericValidators);
-      return builtIn.concat(additional);
+      return _genericValidators;
     },
 
     getMetaInformation: function($element) {
@@ -87,13 +100,32 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
       }
     },
 
-    addValidator: function($scope, $attr, ngModelController, validatorKey) {
-      ngModelController.$validators[validatorKey] = function(modelValue, viewValue) {
+    addValidator: function($scope, $element, $attr, ngModelController, validator) {
+      ngModelController.$validators[validator.name] = function(modelValue, viewValue) {
         var value = modelValue || viewValue;
-        return ngModelController.$isEmpty(value) || genericValidators[validatorKey](value, $scope, $attr);
+        if (ngModelController.$isEmpty(value)) {
+          return true;
+        }
+
+        // See https://github.com/sagrawal14/angular-extras/blob/v0.1.3/src/extras/array.js#L91 for "find" function
+        return validator.validateFn(value, $scope, $attr);
       };
     },
 
+    /**
+     * Add a custom validator to the list of generic validators.
+     * @param genericValidationObject for example, to a add a generic validator to accept either "foo" or "bar":
+     * {
+     *     name: 'foobar',
+     *     validateFn: function(value, $scope, attr) {
+     *         return value === 'foo' || value === 'bar';
+     *     }
+     * }
+     */
+    addGenericValidator: function(genericValidationObject) {
+        _genericValidators.push(genericValidationObject);
+    },
+
     displayErrorPreference: function($element, $attr) {
       var attrName = displayErrorAsAttrName;
       if ($attr[attrName]) {
@@ -204,6 +236,21 @@ angular.module('bootstrap.angular.validation').factory('BsValidationService', ['
 
     shouldValidateOnSubmit: function($element) {
       return getTrigger($element, 'submit');
+    },
+
+    /**
+     * Add or remove various classes on form-group element. For example, if an input has two errors "required" & "min"
+     * then whenever the validation fails, form-group element will have classes like "bs-has-error-required" or
+     * "bs-has-error-min".
+     * @param $formGroupElement jQLite/jQuery form-group element
+     * @param errors Errors object as returned by ngModelController.$error
+     */
+    toggleErrorKeyClasses: function ($formGroupElement, errors) {
+      removeClassByPrefix($formGroupElement, 'bs-has-error-');
+
+      angular.forEach(errors, function (value, key) {
+        $formGroupElement.addClass('bs-has-error-' + key);
+      });
     }
 
   };

src/directives/validation.directive.js

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Basic Bootstrap + Angular Validation</title>
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
+</head>
+<body>
+    <div ng-app="bavApp" class="container" ng-controller="FooController">
+        <form class="form-horizontal" ng-submit="saveMe()">
+
+            <div class="form-group">
+                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+
+                <div class="col-sm-10">
+                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email"
+                           required name="password">
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+
+                <div class="col-sm-10">
+                    <input type="url" class="form-control" id="inputPassword3" placeholder="Password"
+                           ng-model="password" required="required" min="2" max="5" name="password">
+                </div>
+            </div>
+
+            <div class="form-group">
+                <div class="col-sm-offset-2 col-sm-10">
+                    <button type="submit" class="btn btn-default">Sign in</button>
+                </div>
+            </div>
+        </form>
+
+    </div>
+
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../dist/bootstrap-angular-validation-all.min.js"></script>
+    <script>
+      var app = angular.module("bavApp", ["bootstrap.angular.validation"]);
+
+      app.controller("FooController", function ($scope) {
+        $scope.saveMe = function () {
+          alert("Thanks");
+        };
+      });
+    </script>
+</body>
+</html>