angular-validation - npm Package Compare versions

Comparing version 1.2.6 to 1.3.0

API.md

 API
 ===
-**Add Valid Message (error, success) for validation `required`** <br/>
+### **Add Valid Message (error, success) for validation `required`** <br/>
 `required-error-message` and `required-success-message`
@@ -19,3 +19,3 @@
 
-**Add Valid Message (error, success) for validation `email`** <br/>
+### **Add Valid Message (error, success) for validation `email`** <br/>
 `email-error-message` and `email-success-message`
@@ -33,3 +33,3 @@
 
-**Use Default Valid Message** <br/>
+### **Use Default Valid Message** <br/>
 *you don't need to give valid message*
@@ -43,3 +43,3 @@
 <a name="no-validation-message"></a>
-**Don't show the Valid Message `no-validation-message="true"`**
+### **Don't show the Valid Message `no-validation-message="true"`**
 
@@ -53,3 +53,3 @@ ```html
 
-**Add Valid Callback Function, `invalid-callback` & `valid-callback`**
+### **Add Valid Callback Function, `invalid-callback` & `valid-callback`**
 
@@ -61,3 +61,3 @@ ```html
 
-**Select the validation method `watch` `blur` `submit` `submit-only`, default as `watch`** <br/>
+### **Select the validation method `watch` `blur` `submit` `submit-only`, default as `watch`** <br/>
 `validationProvider.validate(form).success(callback).error(callback)` use callback to continue your submit
@@ -117,3 +117,3 @@
 
-**Setup a new Validation `setExpression()` `setDefaultMsg()` with `RegExp` or `Function` in config phase**
+### **Setup a new Validation `setExpression()` `setDefaultMsg()` with `RegExp` or `Function` in config phase**
 <a name="custom-function-huei"></a>
@@ -170,4 +170,4 @@
 
-**Check form whether valid, return `true` if valid. `checkValid()`** <br/>
-**Reset the specific Form. `reset()`**
+### **Check form whether valid, return `true` if valid. `checkValid()`** <br/>
+### **Reset the specific Form. `reset()`**
 
@@ -202,3 +202,3 @@ ```html
 
-**Set the valid/invalid message style CSS**
+### **Set the valid/invalid message style CSS**
 
@@ -220,3 +220,3 @@ ```html
 
-**Custom the valid/invalid message style HTML in `.config()`,** <br/>
+### **Custom the valid/invalid message style HTML in `.config()`,** <br/>
 `setErrorHTML(func)` `setSuccessHTML(func)`, input should be a `function` and given `parameter` which is the valid/invalid message declared
@@ -239,3 +239,3 @@ in `getDefaultMsg()`,and finally return the HTML code
 
-**disable/enable show success/error message**<br/>
+### **disable/enable show success/error message**<br/>
 `default: true`<br/>
@@ -252,3 +252,3 @@ Easily disable success/error message
 
-**multiple validators**<br/>
+### **multiple validators**<br/>
 use commar as splitter
@@ -255,0 +255,0 @@

bower.json

 {
   "name": "angular-validation",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "homepage": "https://github.com/huei90/angular-validation",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -0,1 +1,30 @@
+02 Feb 2015 v1.3.0
+===
+**Important**
+
+This version support angularjs 1.3
+
+**Improvement**
+
+[b6a70b2](https://github.com/huei90/angular-validation/commit/a6ac1400a8a637bc2296a1910c3456797b6a70b2) Use ctrl.$viewValue instead of element[0].value 
+<br/>[0e1925e](https://github.com/huei90/angular-validation/commit/a30e6edaffe15c64cac711a7290236b550e1925e) Default initial Validity is undefined
+<br/>[8c7bfb1](https://github.com/huei90/angular-validation/commit/d505d45a93984e07f0a466d3e385e15ac8c7bfb1) Prevents span from being displayed for valid input without messages
+<br/>[509e2a0](https://github.com/huei90/angular-validation/commit/8b1b46f8e37e5eb435de4a0842cb036e5509e2a0) Allows global disabling of error messages in case someone wants that
+
+**New Features**
+
+[717c98b](https://github.com/huei90/angular-validation/commit/8a86b03ed8a792d91a6c1c3a50a9f1a64717c98b) Add a MessageId atrribute for customizing valid/invalid message position
+
+**Documentation**
+
+[b638dc6](https://github.com/huei90/angular-validation/commit/744edde0326edc3ba4e2308062912e342b638dc6) Update readme with bower installation steps
+<br/>[10318f8](https://github.com/huei90/angular-validation/commit/63d484979d157f3b8a0389f8220d6c91c10318f8) Update API.md for anchor link
+
+**Demo**
+
+[97c1e14](https://github.com/huei90/angular-validation/commit/ff1aee1d4874fb247b2562a7913a9f14497c1e14) Add demo for select form
+<br/>[71f6e0b](https://github.com/huei90/angular-validation/commit/64b8eee0e98600ab1d3945dbe78dd651e71f6e0b) Add ng-repeat input box example
+
+Thanks @lvarayut @eyupatis @U-US\katerbm @dmitry-dedukhin for the contributions
+
 14 Nov 2014 v1.2.6
@@ -2,0 +31,0 @@ ===

config/karma.conf.angular.1.3.js

@@ -78,2 +78,2 @@ module.exports = function(config) {
     });
-};
+};

demo/demo.js

@@ -144,2 +144,7 @@ (function () {
 
+            $scope.form6 = {
+                required: [{}, {}, {}], // ng-repeat
+                checkValid: $validationProvider.checkValid
+            };
+
             // Callback method
@@ -146,0 +151,0 @@ $scope.success = function (message) {

dist/angular-validation.js

@@ -156,3 +156,2 @@ (function() {
 
-
             /**
@@ -300,10 +299,19 @@ * Check form valid, return true
                  */
-                var validFunc = function(element, validMessage, validation, callback, ctrl) {
-                    if ($validationProvider.showSuccessMessage) {
-                        element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                var validFunc = function(element, validMessage, validation, scope, ctrl) {
+                    var messageElem,
+                        messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).success;
+
+                    if (scope.messageId)
+                        messageElem = angular.element(document.querySelector('#' + scope.messageId));
+                    else
+                        messageElem = element.next();
+
+                    if ($validationProvider.showSuccessMessage && messageToShow) {
+                        messageElem.html($validationProvider.getSuccessHTML(messageToShow));
+                        messageElem.css('display', '');
                     } else {
-                        element.next().html('');
+                        messageElem.css('display', 'none');
                     }
                     ctrl.$setValidity(ctrl.$name, true);
-                    if (callback) callback();
+                    if (scope.validCallback) scope.validCallback();
 
@@ -323,10 +331,19 @@ return true;
                  */
-                var invalidFunc = function(element, validMessage, validation, callback, ctrl) {
-                    if ($validationProvider.showErrorMessage) {
-                        element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                var invalidFunc = function(element, validMessage, validation, scope, ctrl) {
+                    var messageElem,
+                        messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).error;
+
+                    if (scope.messageId)
+                        messageElem = angular.element(document.querySelector('#' + scope.messageId));
+                    else
+                        messageElem = element.next();
+
+                    if ($validationProvider.showErrorMessage && messageToShow) {
+                        messageElem.html($validationProvider.getErrorHTML(messageToShow));
+                        messageElem.css('display', '');
                     } else {
-                        element.next().html('');
+                        messageElem.css('display', 'none');
                     }
                     ctrl.$setValidity(ctrl.$name, false);
-                    if (callback) callback();
+                    if (scope.inValidCallback) scope.inValidCallback();
 
@@ -365,3 +382,3 @@ return false;
                             success: function() {
-                                validFunc(element, attrs[successMessage], validator, scope.validCallback, ctrl);
+                                validFunc(element, attrs[successMessage], validator, scope, ctrl);
                                 if (leftValidation.length) {
@@ -374,3 +391,3 @@ checkValidation(scope, element, attrs, ctrl, leftValidation, value);
                             error: function() {
-                                return invalidFunc(element, attrs[errorMessage], validator, scope.invalidCallback, ctrl);
+                                return invalidFunc(element, attrs[errorMessage], validator, scope, ctrl);
                             }
@@ -402,3 +419,7 @@ };
                     else if (expression.constructor === RegExp) {
-                        return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
+                        // Only apply the test if the value is neither undefined or null
+                        if (value !== undefined && value !== null)
+                            return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
+                        else
+                            return valid.error();
                     } else {
@@ -428,3 +449,4 @@ return valid.error();
                         validCallback: '&',
-                        invalidCallback: '&'
+                        invalidCallback: '&',
+                        messageId: '@'
                     },
@@ -456,11 +478,7 @@ link: function(scope, element, attrs, ctrl) {
 
-                        /**
-                         * Valid/Invalid Message
-                         */
-                        element.after('<span></span>');
 
                         /**
-                         * Set initial validity to false if no boolean value is transmitted
+                         * Set initial validity to undefined if no boolean value is transmitted
                          */
-                        var initialValidity = false;
+                        var initialValidity;
                         if (typeof scope.initialValidity === 'boolean') {
@@ -471,2 +489,8 @@ initialValidity = scope.initialValidity;
                         /**
+                         * Default Valid/Invalid Message
+                         */
+                        if (!scope.messageId)
+                            element.after('<span></span>');
+
+                        /**
                          * Set custom initial validity
@@ -493,5 +517,8 @@ * Usage: <input initial-validity="true" ... >
                             ctrl.$setPristine();
-                            ctrl.$setValidity(ctrl.$name, false);
+                            ctrl.$setValidity(ctrl.$name, undefined);
                             ctrl.$render();
-                            element.next().html('');
+                            if (scope.messageId)
+                                angular.element(document.querySelector('#' + scope.messageId)).html('');
+                            else
+                                element.next().html('');
                         });
@@ -508,3 +535,3 @@
                             scope.$on(ctrl.$name + 'submit-' + uid, function(event, index) {
-                                var value = element[0].value,
+                                var value = ctrl.$viewValue,
                                     isValid = false;
@@ -551,3 +578,3 @@
                                 element.bind('blur', function() {
-                                    var value = element[0].value;
+                                    var value = ctrl.$viewValue;
                                     scope.$apply(function() {
@@ -581,3 +608,6 @@ checkValidation(scope, element, attrs, ctrl, validation, value);
                                     // Don't validate form when the input is clean(pristine)
-                                    element.next().html('');
+                                    if (scope.messageId)
+                                        angular.element(document.querySelector('#' + scope.messageId)).html('');
+                                    else
+                                        element.next().html('');
                                     return;
@@ -595,3 +625,7 @@ }
                             attrs.$observe('noValidationMessage', function(value) {
-                                var el = element.next();
+                                var el;
+                                if (scope.messageId)
+                                    el = angular.element(document.querySelector('#' + scope.messageId));
+                                else
+                                    el = element.next();
                                 if (value == 'true' || value === true) {
@@ -598,0 +632,0 @@ el.css('display', 'none');

dist/angular-validation.min.js

@@ -1,1 +0,1 @@
-(function(){angular.module("validation",["validation.provider","validation.directive"])}).call(this),function(){angular.module("validation.provider",[]).provider("$validation",function(){var a,b,c,d,e,f=this,g=function(f){a=f,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q"),e=a.get("$timeout")},h={},i={};this.setExpression=function(a){return angular.extend(h,a),f},this.getExpression=function(a){return h[a]},this.setDefaultMsg=function(a){return angular.extend(i,a),f},this.getDefaultMsg=function(a){return i[a]},this.setErrorHTML=function(a){return a.constructor===Function?(f.getErrorHTML=a,f):void 0},this.getErrorHTML=function(a){return'<p class="validation-invalid">'+a+"</p>"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return'<p class="validation-valid">'+a+"</p>"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return void 0===a.$valid?!1:a&&a.$valid===!0},this.validate=function(a){var c=d.defer(),g=0;if(void 0===a)return console.error("This is not a regular Form name scope"),c.reject("This is not a regular Form name scope"),c.promise;if(a.validationId)b.$broadcast(a.$name+"submit-"+a.validationId,g++);else if(a.constructor===Array)for(var h in a)b.$broadcast(a[h].$name+"submit-"+a[h].validationId,g++);else for(var i in a)"$"!==i[0]&&a[i].hasOwnProperty("$dirty")&&b.$broadcast(i+"submit-"+a[i].validationId,g++);return c.promise.success=function(a){return c.promise.then(function(b){a(b)}),c.promise},c.promise.error=function(a){return c.promise.then(null,function(b){a(b)}),c.promise},e(function(){f.checkValid(a)?c.resolve("success"):c.reject("error")}),c.promise},this.reset=function(a){if(void 0===a)return void console.error("This is not a regular Form name scope");if(a.validationId)b.$broadcast(a.$name+"reset-"+a.validationId);else if(a.constructor===Array)for(var c in a)b.$broadcast(a[c].$name+"reset-"+a[c].validationId);else for(var d in a)"$"!==d[0]&&a[d].hasOwnProperty("$dirty")&&b.$broadcast(d+"reset-"+a[d].validationId)},this.$get=["$injector",function(a){return g(a),{setErrorHTML:this.setErrorHTML,getErrorHTML:this.getErrorHTML,setSuccessHTML:this.setSuccessHTML,getSuccessHTML:this.getSuccessHTML,setExpression:this.setExpression,getExpression:this.getExpression,setDefaultMsg:this.setDefaultMsg,getDefaultMsg:this.getDefaultMsg,showSuccessMessage:this.showSuccessMessage,showErrorMessage:this.showErrorMessage,checkValid:this.checkValid,validate:this.validate,reset:this.reset}}]})}.call(this),function(){angular.module("validation.directive",["validation.provider"]).directive("validator",["$injector",function(a){var b=a.get("$validation"),c=a.get("$q"),d=a.get("$timeout"),e=function(a,c,d,e,f){return a.next().html(b.showSuccessMessage?b.getSuccessHTML(c||b.getDefaultMsg(d).success):""),f.$setValidity(f.$name,!0),e&&e(),!0},f=function(a,c,d,e,f){return a.next().html(b.showErrorMessage?b.getErrorHTML(c||b.getDefaultMsg(d).error):""),f.$setValidity(f.$name,!1),e&&e(),!1},g=!1,h=function(a,d,g,i,j,k){var l=j.slice(0),m=l[0].trim(),n=l.slice(1),o=m+"SuccessMessage",p=m+"ErrorMessage",q=b.getExpression(m),r={success:function(){return e(d,g[o],m,a.validCallback,i),n.length?void h(a,d,g,i,n,k):!0},error:function(){return f(d,g[p],m,a.invalidCallback,i)}};if(void 0===q){if(console.error('You are using undefined validator "%s"',m),!n.length)return;h(a,d,g,i,n,k)}return q.constructor===Function?c.all([b.getExpression(m)(k,a,d,g)]).then(function(a){return a&&a.length>0&&a[0]?r.success():r.error()},function(){return r.error()}):q.constructor===RegExp&&b.getExpression(m).test(k)?r.success():r.error()},i=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},j=function(){return i()+i()+i()+i()};return{restrict:"A",require:"ngModel",scope:{model:"=ngModel",initialValidity:"=initialValidity",validCallback:"&",invalidCallback:"&"},link:function(a,b,c,e){var f=function(){},i=c.validator.split(","),k=e.validationId=j();b.after("<span></span>");var l=!1;"boolean"==typeof a.initialValidity&&(l=a.initialValidity),e.$setValidity(e.$name,l),a.$on(e.$name+"reset-"+k,function(){f(),g=!1,e.$setViewValue(""),e.$setPristine(),e.$setValidity(e.$name,!1),e.$render(),b.next().html("")}),function(){return a.$on(e.$name+"submit-"+k,function(d,j){var k=b[0].value,l=!1;0===j&&(g=!1),l=h(a,b,c,e,i,k),"submit"===c.validMethod&&(f(),f=a.$watch("model",function(d,f){d!==f&&((void 0===d||null===d)&&(d=""),l=h(a,b,c,e,i,d))})),g||l||(g=!0,b[0].focus())}),"blur"===c.validMethod?void b.bind("blur",function(){var d=b[0].value;a.$apply(function(){h(a,b,c,e,i,d)})}):void("submit"!==c.validMethod&&"submit-only"!==c.validMethod&&a.$watch("model",function(d){if(e.$pristine&&e.$viewValue)e.$setViewValue(e.$viewValue);else if(e.$pristine)return void b.next().html("");h(a,b,c,e,i,d)}))}(),d(function(){c.$observe("noValidationMessage",function(a){var c=b.next();"true"==a||a===!0?c.css("display","none"):("false"==a||a===!1)&&c.css("display","block")})})}}}]).directive("validationSubmit",["$injector",function(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{priority:1,require:"?ngClick",link:function(a,e,f){var g=d(f.validationSubmit)(a);c(function(){e.off("click"),e.on("click",function(c){c.preventDefault(),b.validate(g).success(function(){d(f.ngClick)(a)})})})}}}]).directive("validationReset",["$injector",function(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{link:function(a,e,f){var g=d(f.validationReset)(a);c(function(){e.on("click",function(a){a.preventDefault(),b.reset(g)})})}}}])}.call(this);
+(function(){angular.module("validation",["validation.provider","validation.directive"])}).call(this),function(){angular.module("validation.provider",[]).provider("$validation",function(){var a,b,c,d,e,f=this,g=function(f){a=f,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q"),e=a.get("$timeout")},h={},i={};this.setExpression=function(a){return angular.extend(h,a),f},this.getExpression=function(a){return h[a]},this.setDefaultMsg=function(a){return angular.extend(i,a),f},this.getDefaultMsg=function(a){return i[a]},this.setErrorHTML=function(a){return a.constructor===Function?(f.getErrorHTML=a,f):void 0},this.getErrorHTML=function(a){return'<p class="validation-invalid">'+a+"</p>"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return'<p class="validation-valid">'+a+"</p>"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return void 0===a.$valid?!1:a&&a.$valid===!0},this.validate=function(a){var c=d.defer(),g=0;if(void 0===a)return console.error("This is not a regular Form name scope"),c.reject("This is not a regular Form name scope"),c.promise;if(a.validationId)b.$broadcast(a.$name+"submit-"+a.validationId,g++);else if(a.constructor===Array)for(var h in a)b.$broadcast(a[h].$name+"submit-"+a[h].validationId,g++);else for(var i in a)"$"!==i[0]&&a[i].hasOwnProperty("$dirty")&&b.$broadcast(i+"submit-"+a[i].validationId,g++);return c.promise.success=function(a){return c.promise.then(function(b){a(b)}),c.promise},c.promise.error=function(a){return c.promise.then(null,function(b){a(b)}),c.promise},e(function(){f.checkValid(a)?c.resolve("success"):c.reject("error")}),c.promise},this.reset=function(a){if(void 0===a)return void console.error("This is not a regular Form name scope");if(a.validationId)b.$broadcast(a.$name+"reset-"+a.validationId);else if(a.constructor===Array)for(var c in a)b.$broadcast(a[c].$name+"reset-"+a[c].validationId);else for(var d in a)"$"!==d[0]&&a[d].hasOwnProperty("$dirty")&&b.$broadcast(d+"reset-"+a[d].validationId)},this.$get=["$injector",function(a){return g(a),{setErrorHTML:this.setErrorHTML,getErrorHTML:this.getErrorHTML,setSuccessHTML:this.setSuccessHTML,getSuccessHTML:this.getSuccessHTML,setExpression:this.setExpression,getExpression:this.getExpression,setDefaultMsg:this.setDefaultMsg,getDefaultMsg:this.getDefaultMsg,showSuccessMessage:this.showSuccessMessage,showErrorMessage:this.showErrorMessage,checkValid:this.checkValid,validate:this.validate,reset:this.reset}}]})}.call(this),function(){angular.module("validation.directive",["validation.provider"]).directive("validator",["$injector",function(a){var b=a.get("$validation"),c=a.get("$q"),d=a.get("$timeout"),e=function(a,c,d,e,f){var g,h=c||b.getDefaultMsg(d).success;return g=e.messageId?angular.element(document.querySelector("#"+e.messageId)):a.next(),b.showSuccessMessage&&h?(g.html(b.getSuccessHTML(h)),g.css("display","")):g.css("display","none"),f.$setValidity(f.$name,!0),e.validCallback&&e.validCallback(),!0},f=function(a,c,d,e,f){var g,h=c||b.getDefaultMsg(d).error;return g=e.messageId?angular.element(document.querySelector("#"+e.messageId)):a.next(),b.showErrorMessage&&h?(g.html(b.getErrorHTML(h)),g.css("display","")):g.css("display","none"),f.$setValidity(f.$name,!1),e.inValidCallback&&e.inValidCallback(),!1},g=!1,h=function(a,d,g,i,j,k){var l=j.slice(0),m=l[0].trim(),n=l.slice(1),o=m+"SuccessMessage",p=m+"ErrorMessage",q=b.getExpression(m),r={success:function(){return e(d,g[o],m,a,i),n.length?void h(a,d,g,i,n,k):!0},error:function(){return f(d,g[p],m,a,i)}};if(void 0===q){if(console.error('You are using undefined validator "%s"',m),!n.length)return;h(a,d,g,i,n,k)}return q.constructor===Function?c.all([b.getExpression(m)(k,a,d,g)]).then(function(a){return a&&a.length>0&&a[0]?r.success():r.error()},function(){return r.error()}):q.constructor===RegExp&&void 0!==k&&null!==k&&b.getExpression(m).test(k)?r.success():r.error()},i=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},j=function(){return i()+i()+i()+i()};return{restrict:"A",require:"ngModel",scope:{model:"=ngModel",initialValidity:"=initialValidity",validCallback:"&",invalidCallback:"&",messageId:"@"},link:function(a,b,c,e){var f,i=function(){},k=c.validator.split(","),l=e.validationId=j();"boolean"==typeof a.initialValidity&&(f=a.initialValidity),a.messageId||b.after("<span></span>"),e.$setValidity(e.$name,f),a.$on(e.$name+"reset-"+l,function(){i(),g=!1,e.$setViewValue(""),e.$setPristine(),e.$setValidity(e.$name,void 0),e.$render(),a.messageId?angular.element(document.querySelector("#"+a.messageId)).html(""):b.next().html("")}),function(){return a.$on(e.$name+"submit-"+l,function(d,f){var j=e.$viewValue,l=!1;0===f&&(g=!1),l=h(a,b,c,e,k,j),"submit"===c.validMethod&&(i(),i=a.$watch("model",function(d,f){d!==f&&((void 0===d||null===d)&&(d=""),l=h(a,b,c,e,k,d))})),g||l||(g=!0,b[0].focus())}),"blur"===c.validMethod?void b.bind("blur",function(){var d=e.$viewValue;a.$apply(function(){h(a,b,c,e,k,d)})}):void("submit"!==c.validMethod&&"submit-only"!==c.validMethod&&a.$watch("model",function(d){if(e.$pristine&&e.$viewValue)e.$setViewValue(e.$viewValue);else if(e.$pristine)return void(a.messageId?angular.element(document.querySelector("#"+a.messageId)).html(""):b.next().html(""));h(a,b,c,e,k,d)}))}(),d(function(){c.$observe("noValidationMessage",function(c){var d;d=a.messageId?angular.element(document.querySelector("#"+a.messageId)):b.next(),"true"==c||c===!0?d.css("display","none"):("false"==c||c===!1)&&d.css("display","block")})})}}}]).directive("validationSubmit",["$injector",function(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{priority:1,require:"?ngClick",link:function(a,e,f){var g=d(f.validationSubmit)(a);c(function(){e.off("click"),e.on("click",function(c){c.preventDefault(),b.validate(g).success(function(){d(f.ngClick)(a)})})})}}}]).directive("validationReset",["$injector",function(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{link:function(a,e,f){var g=d(f.validationReset)(a);c(function(){e.on("click",function(a){a.preventDefault(),b.reset(g)})})}}}])}.call(this);

Gruntfile.js

@@ -82,4 +82,8 @@ module.exports = function(grunt) {
         karma: {
-            angular1_2: {
-                configFile: 'config/karma.conf.angular.1.2.js'
+            // angular 1.2.x support to version angular-validation 1.2.x
+            // angular1_2: {
+            //     configFile: 'config/karma.conf.angular.1.2.js'
+            // }
+            angular1_3: {
+                configFile: 'config/karma.conf.angular.1.3.js'
             }
@@ -95,3 +99,4 @@ }
     grunt.registerTask('check', ['jshint', 'jsbeautifier', 'build']); // use this before commit
+    grunt.registerTask('test', ['karma']);
 
 };

package.json

 {
   "name": "angular-validation",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "Client-side Validation for AngularJS",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,2 +0,2 @@
-angular-validation 1.2.6
+angular-validation 1.3.0
 =========================
@@ -13,9 +13,9 @@ [![NPM version](https://badge.fury.io/js/angular-validation.svg)](http://badge.fury.io/js/angular-validation)
     
-angularjs 1.2.0 support to version angular-validation 1.2.6 <br/>
-angularjs 1.3.0 support after version angular-validation 1.3.0
+angularjs 1.2.x support to version [angular-validation 1.2.x](https://github.com/huei90/angular-validation/tree/v1.2.x) <br/>
+angularjs 1.3.x support after version angular-validation 1.3.x
 
 Requirement
 -----
-[AngularJS](http://angularjs.org) > 1.2.0 (for angular-validation < 1.2.6) <br/>
-[AngularJS](http://angularjs.org) > 1.3.0 (for angular-validation > 1.3)
+[AngularJS](http://angularjs.org) 1.2.x (for [angular-validation 1.2.x](https://github.com/huei90/angular-validation/tree/v1.2.x)) <br/>
+[AngularJS](http://angularjs.org) 1.3.x (for [angular-validation 1.3.x](https://github.com/huei90/angular-validation/tree/master))
 
@@ -40,2 +40,8 @@ DEMO
 
+or with bower
+
+```
+bower install angular-validation
+```
+
 Using angular-validation
@@ -47,2 +53,8 @@ ---
 ```
+Using angular-validation with bower
+---
+```html
+<script src="lib/angular-validation/dist/angular-validation.js"></script>
+<script src="lib/angular-validation/dist/angular-validation-rule.js"></script>
+```
 ```js
@@ -49,0 +61,0 @@ angular.module('yourApp', ['validation']);

src/directive.js

@@ -19,10 +19,19 @@ (function() {
                  */
-                var validFunc = function(element, validMessage, validation, callback, ctrl) {
-                    if ($validationProvider.showSuccessMessage) {
-                        element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                var validFunc = function(element, validMessage, validation, scope, ctrl) {
+                    var messageElem,
+                        messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).success;
+
+                    if (scope.messageId)
+                        messageElem = angular.element(document.querySelector('#' + scope.messageId));
+                    else
+                        messageElem = element.next();
+
+                    if ($validationProvider.showSuccessMessage && messageToShow) {
+                        messageElem.html($validationProvider.getSuccessHTML(messageToShow));
+                        messageElem.css('display', '');
                     } else {
-                        element.next().html('');
+                        messageElem.css('display', 'none');
                     }
                     ctrl.$setValidity(ctrl.$name, true);
-                    if (callback) callback();
+                    if (scope.validCallback) scope.validCallback();
 
@@ -42,10 +51,19 @@ return true;
                  */
-                var invalidFunc = function(element, validMessage, validation, callback, ctrl) {
-                    if ($validationProvider.showErrorMessage) {
-                        element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                var invalidFunc = function(element, validMessage, validation, scope, ctrl) {
+                    var messageElem,
+                        messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).error;
+
+                    if (scope.messageId)
+                        messageElem = angular.element(document.querySelector('#' + scope.messageId));
+                    else
+                        messageElem = element.next();
+
+                    if ($validationProvider.showErrorMessage && messageToShow) {
+                        messageElem.html($validationProvider.getErrorHTML(messageToShow));
+                        messageElem.css('display', '');
                     } else {
-                        element.next().html('');
+                        messageElem.css('display', 'none');
                     }
                     ctrl.$setValidity(ctrl.$name, false);
-                    if (callback) callback();
+                    if (scope.inValidCallback) scope.inValidCallback();
 
@@ -84,3 +102,3 @@ return false;
                             success: function() {
-                                validFunc(element, attrs[successMessage], validator, scope.validCallback, ctrl);
+                                validFunc(element, attrs[successMessage], validator, scope, ctrl);
                                 if (leftValidation.length) {
@@ -93,3 +111,3 @@ checkValidation(scope, element, attrs, ctrl, leftValidation, value);
                             error: function() {
-                                return invalidFunc(element, attrs[errorMessage], validator, scope.invalidCallback, ctrl);
+                                return invalidFunc(element, attrs[errorMessage], validator, scope, ctrl);
                             }
@@ -121,3 +139,7 @@ };
                     else if (expression.constructor === RegExp) {
-                        return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
+                        // Only apply the test if the value is neither undefined or null
+                        if (value !== undefined && value !== null)
+                            return $validationProvider.getExpression(validator).test(value) ? valid.success() : valid.error();
+                        else
+                            return valid.error();
                     } else {
@@ -147,3 +169,4 @@ return valid.error();
                         validCallback: '&',
-                        invalidCallback: '&'
+                        invalidCallback: '&',
+                        messageId: '@'
                     },
@@ -175,11 +198,7 @@ link: function(scope, element, attrs, ctrl) {
 
-                        /**
-                         * Valid/Invalid Message
-                         */
-                        element.after('<span></span>');
 
                         /**
-                         * Set initial validity to false if no boolean value is transmitted
+                         * Set initial validity to undefined if no boolean value is transmitted
                          */
-                        var initialValidity = false;
+                        var initialValidity;
                         if (typeof scope.initialValidity === 'boolean') {
@@ -190,2 +209,8 @@ initialValidity = scope.initialValidity;
                         /**
+                         * Default Valid/Invalid Message
+                         */
+                        if (!scope.messageId)
+                            element.after('<span></span>');
+
+                        /**
                          * Set custom initial validity
@@ -212,5 +237,8 @@ * Usage: <input initial-validity="true" ... >
                             ctrl.$setPristine();
-                            ctrl.$setValidity(ctrl.$name, false);
+                            ctrl.$setValidity(ctrl.$name, undefined);
                             ctrl.$render();
-                            element.next().html('');
+                            if (scope.messageId)
+                                angular.element(document.querySelector('#' + scope.messageId)).html('');
+                            else
+                                element.next().html('');
                         });
@@ -227,3 +255,3 @@
                             scope.$on(ctrl.$name + 'submit-' + uid, function(event, index) {
-                                var value = element[0].value,
+                                var value = ctrl.$viewValue,
                                     isValid = false;
@@ -270,3 +298,3 @@
                                 element.bind('blur', function() {
-                                    var value = element[0].value;
+                                    var value = ctrl.$viewValue;
                                     scope.$apply(function() {
@@ -300,3 +328,6 @@ checkValidation(scope, element, attrs, ctrl, validation, value);
                                     // Don't validate form when the input is clean(pristine)
-                                    element.next().html('');
+                                    if (scope.messageId)
+                                        angular.element(document.querySelector('#' + scope.messageId)).html('');
+                                    else
+                                        element.next().html('');
                                     return;
@@ -314,3 +345,7 @@ }
                             attrs.$observe('noValidationMessage', function(value) {
-                                var el = element.next();
+                                var el;
+                                if (scope.messageId)
+                                    el = angular.element(document.querySelector('#' + scope.messageId));
+                                else
+                                    el = element.next();
                                 if (value == 'true' || value === true) {
@@ -317,0 +352,0 @@ el.css('display', 'none');

src/provider.js

@@ -152,3 +152,2 @@ (function() {
 
-
             /**
@@ -155,0 +154,0 @@ * Check form valid, return true

test/unit/directivesSpec.js

@@ -5,3 +5,3 @@ 'use strict';
 
-describe('directives', function () {
+describe('directives', function() {
 
@@ -16,6 +16,6 @@ var $scope,
     beforeEach(module('validation.rule'));
-    
-    describe('Example of Required', function () {
 
-        beforeEach(inject(function ($injector) {
+    describe('Example of Required', function() {
+
+        beforeEach(inject(function($injector) {
             $rootScope = $injector.get('$rootScope');
@@ -27,15 +27,15 @@ $compile = $injector.get('$compile');
             element = $compile('<form name="Form"><input type="text" name="required" ng-model="required" validator="required"></form>')($scope);
+            $scope.$digest();
         }));
 
-        it('Initial should be pristine and invalid', function () {
+        it('Initial should be pristine and invalid', function() {
             expect($scope.Form.$pristine).toBe(true);
             expect(element.hasClass('ng-pristine')).toBe(true);
-            expect($scope.Form.$invalid).toBe(true);
+            expect($scope.Form.$valid).toBeUndefined(true);
+            expect($scope.Form.$invalid).toBeUndefined(true);
         });
 
-        it('After Input should be dirty, valid, has class "validation-valid"', function () {
+        it('After Input should be dirty, valid, has class "validation-valid"', function() {
 
-            $scope.$apply(function () {
-                $scope.required = 'Required';
-            });
+            $scope.Form.required.$setViewValue('Required');
 
@@ -49,12 +49,7 @@ expect($scope.Form.$dirty).toBe(true);
 
-        it('Input null should be dirty and invalid (after Input), has class "validation-invalid', function () {
+        it('Input null should be dirty and invalid (after Input), has class "validation-invalid', function() {
 
-            $scope.$apply(function () {
-                $scope.required = 'Required';
-            });
+            $scope.Form.required.$setViewValue('Required');
+            $scope.Form.required.$setViewValue('');
 
-            $scope.$apply(function () {
-                $scope.required = '';
-            });
-
             expect($scope.Form.$dirty).toBe(true);
@@ -67,3 +62,3 @@ expect(element.hasClass('ng-dirty')).toBe(true);
 
-        it('no-validation-message', inject(function () {
+        it('no-validation-message', inject(function() {
             var display;
@@ -83,5 +78,7 @@ // given no-validation-message="true"
             // given no-validation-message="{{ noValidMessage }}" -> 'true'
-            $scope.noValidMessage = 'true';
             element = $compile('<form name="Form"><input type="text" name="required" ng-model="required" validator="required" no-validation-message="{{ noValidMessage }}"></form>')($scope);
             $timeout.flush();
+            $scope.$apply(function() {
+                $scope.noValidMessage = 'true';
+            });
             display = element.find('span').css('display');
@@ -91,3 +88,3 @@ expect(display).toBe('none');
             // given no-validation-message="{{ noValidMessage }}" -> true
-            $scope.$apply(function () {
+            $scope.$apply(function() {
                 $scope.noValidMessage = true;
@@ -99,3 +96,3 @@ });
             // given no-validation-message="{{ noValidMessage }}" -> 'false'
-            $scope.$apply(function () {
+            $scope.$apply(function() {
                 $scope.noValidMessage = 'false';
@@ -107,3 +104,3 @@ });
             // given no-validation-message="{{ noValidMessage }}" -> false
-            $scope.$apply(function () {
+            $scope.$apply(function() {
                 $scope.noValidMessage = false;
@@ -114,4 +111,66 @@ });
 
-        }))
+        }));
     });
-});
+
+    describe('Message-id attribute', function() {
+        var messageElem;
+
+        beforeEach(inject(function($injector) {
+            $rootScope = $injector.get('$rootScope');
+            $compile = $injector.get('$compile');
+            $timeout = $injector.get('$timeout');
+            $scope = $rootScope.$new();
+
+            element = $compile('<form name="Form"><input type="text" name="required" ng-model="required" validator="required" message-id="message"><span id="message"></span></form>')($scope);
+            angular.element(document.body).append(element);
+            $scope.$digest();
+        }));
+
+        afterEach(function() {
+            element.remove();
+            element = null;
+        });
+
+        it('should be pristine and invalid', function() {
+            expect($scope.Form.$pristine).toBe(true);
+            expect(element.hasClass('ng-pristine')).toBe(true);
+            expect($scope.Form.$valid).toBeUndefined(true);
+            expect($scope.Form.$invalid).toBeUndefined(true);
+        });
+
+        it('should be dirty and valid', function() {
+            $scope.Form.required.$setViewValue('Required');
+
+            expect($scope.Form.$dirty).toBe(true);
+            expect(element.hasClass('ng-dirty')).toBe(true);
+            expect($scope.Form.$valid).toBe(true);
+            expect(element.hasClass('ng-valid')).toBe(true);
+        });
+
+        it('should be dirty and invalid', function() {
+            $scope.Form.required.$setViewValue('Required');
+            $scope.Form.required.$setViewValue('');
+
+            expect($scope.Form.$dirty).toBe(true);
+            expect(element.hasClass('ng-dirty')).toBe(true);
+            expect($scope.Form.$invalid).toBe(true);
+            expect(element.hasClass('ng-invalid')).toBe(true);
+        });
+
+        it('should have a success message inside the #message element', function() {
+            $scope.Form.required.$setViewValue('Required');
+
+            messageElem = angular.element(element[0].querySelector('#message > p'));
+            expect(messageElem.hasClass('validation-valid')).toBe(true);
+        });
+
+        it('should have an error message inside the #message element', function() {
+            $scope.Form.required.$setViewValue('Required');
+            $scope.Form.required.$setViewValue('');
+
+            messageElem = angular.element(element[0].querySelector('#message > p'));
+            expect(messageElem.hasClass('validation-invalid')).toBe(true);
+
+        });
+    });
+});

test/unit/providerSpec.js

@@ -98,9 +98,5 @@ 'use strict';
         expect(validationProvider.checkValid($scope.Form)).toBe(false);
-        $scope.$apply(function () {
-            $scope.required = 'required';
-        });
+        $scope.Form.required.$setViewValue('required');
         expect(validationProvider.checkValid($scope.Form)).toBe(true);
-        $scope.$apply(function () {
-            $scope.required = '';
-        });
+        $scope.Form.required.$setViewValue('');
         expect(validationProvider.checkValid($scope.Form)).toBe(false);
@@ -169,2 +165,2 @@ }));
     }));
-});
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

134

increased by9.84%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1318724

decreased by-43.26%

Number of package files

27

decreased by-10%

Lines of code

27182

decreased by-44.66%

No dependency changes