angular-validation - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

bower.json

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

demo/demo.js

@@ -52,2 +52,12 @@ angular.module('myApp', ['validation'])
 
+        $scope.form5 = {
+            checkValid: $validationProvider.checkValid,
+            submit: function (form) {
+                $validationProvider.validate(form);
+            },
+            reset: function (form) {
+                $validationProvider.reset(form);
+            }
+        };
+
         // Callback method
@@ -54,0 +64,0 @@ $scope.success = function (message) {

dist/angular-validation.js

@@ -149,2 +149,20 @@ (function () {
             /**
+             * Whether show the validation success message
+             * You can easily change this to false in your config
+             * example: $validationProvider.showSuccessMessage = false;
+             * @type {boolean}
+             */
+            this.showSuccessMessage = true;
+
+
+            /**
+             * Whether show the validation error message
+             * You can easily change this to false in your config
+             * example: $validationProvider.showErrorMessage = false;
+             * @type {boolean}
+             */
+            this.showErrorMessage = true;
+
+
+            /**
              * Check form valid, return true
@@ -209,6 +227,2 @@ * checkValid(Form): Check the specific form(Form) valid from angular `$valid`
                     if (form[k].hasOwnProperty('$dirty')) {
-                        form[k].$setViewValue(null);
-                        form[k].$setPristine();
-                        form[k].$setValidity(form[k].$name, false);
-                        form[k].$render();
                         $scope.$broadcast(k + 'reset');
@@ -235,2 +249,4 @@ }
                     getDefaultMsg: this.getDefaultMsg,
+                    showSuccessMessage: this.showSuccessMessage,
+                    showErrorMessage: this.showErrorMessage,
                     checkValid: this.checkValid,
@@ -263,3 +279,7 @@ validate: this.validate,
             var validFunc = function (element, validMessage, validation, callback, ctrl) {
-                element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                if ($validationProvider.showSuccessMessage) {
+                    element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                } else {
+                    element.next().html('');
+                }
                 ctrl.$setValidity(ctrl.$name, true);
@@ -280,3 +300,7 @@ if (callback) callback();
             var invalidFunc = function (element, validMessage, validation, callback, ctrl) {
-                element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                if ($validationProvider.showErrorMessage) {
+                    element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                } else {
+                    element.next().html('');
+                }
                 ctrl.$setValidity(ctrl.$name, false);
@@ -341,3 +365,14 @@ if (callback) callback();
                 link: function (scope, element, attrs, ctrl) {
+
                     /**
+                     * watch
+                     * @type {watch}
+                     *
+                     * Use to collect scope.$watch method
+                     *
+                     * use watch() to destroy the $watch method
+                     */
+                    var watch = function () {};
+
+                    /**
                      * validator
@@ -350,3 +385,2 @@ * @type {*|Array}
 
-
                     /**
@@ -366,2 +400,15 @@ * Valid/Invalid Message
                     scope.$on(ctrl.$name + 'reset', function () {
+
+                        /**
+                         * clear scope.$watch here
+                         * when reset status
+                         * clear the $watch method to prevent
+                         * $watch again while reset the form
+                         */
+                        watch();
+
+                        ctrl.$setViewValue(null);
+                        ctrl.$setPristine();
+                        ctrl.$setValidity(ctrl.$name, false);
+                        ctrl.$render();
                         element.next().html('');
@@ -380,2 +427,21 @@ });
                             var value = element[0].value;
+
+                            if (attrs.validMethod === 'submit') {
+
+                                watch(); // clear previous scope.$watch
+                                watch = scope.$watch('model', function (value) {
+
+                                    // scope.$watch will translate '' to undefined
+                                    // undefined will pass the required submit /^.+/
+                                    // cause some error in this validation
+                                    if (value === undefined) {
+                                        value = '';
+                                    }
+
+                                    checkValidation(scope, element, attrs, ctrl, validation, value);
+                                });
+
+                                return;
+                            }
+
                             checkValidation(scope, element, attrs, ctrl, validation, value);
@@ -399,5 +465,5 @@ });
                         /**
-                         * Validate submit method
+                         * Validate submit & submit-only method
                          */
-                        if (attrs.validMethod === 'submit') {
+                        if (attrs.validMethod === 'submit' || attrs.validMethod === 'submit-only') {
                             return;
@@ -404,0 +470,0 @@ }

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=this,f=function(e){a=e,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q")},g={required:/^.+$/,url:/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/,email:/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,number:/^\d+$/},h={required:{error:"This should be Required!!",success:"It's Required"},url:{error:"This should be Url",success:"It's Url"},email:{error:"This should be Email",success:"It's Email"},number:{error:"This should be Number",success:"It's Number"}};this.setExpression=function(a){angular.extend(g,a)},this.getExpression=function(a){return g[a]},this.setDefaultMsg=function(a){angular.extend(h,a)},this.getDefaultMsg=function(a){return h[a]},this.setErrorHTML=function(a){a.constructor===Function&&(e.getErrorHTML=a)},this.getErrorHTML=function(a){return'<p class="validation-invalid">'+a+"</p>"},this.setSuccessHTML=function(a){a.constructor===Function&&(e.getSuccessHTML=a)},this.getSuccessHTML=function(a){return'<p class="validation-valid">'+a+"</p>"},this.checkValid=function(a){return void 0===a.$valid?!1:a&&a.$valid===!0},this.validate=function(a){for(var c in a)a[c].hasOwnProperty("$dirty")&&b.$broadcast(c+"submit");var f=d.defer();return f.promise.success=function(a){return f.promise.then(function(b){a(b)}),f.promise},f.promise.error=function(a){return f.promise.then(null,function(b){a(b)}),f.promise},e.checkValid(a)?f.resolve("success"):f.reject("error"),f.promise},this.reset=function(a){for(var c in a)a[c].hasOwnProperty("$dirty")&&(a[c].$setViewValue(null),a[c].$setPristine(),a[c].$setValidity(a[c].$name,!1),a[c].$render(),b.$broadcast(c+"reset"))},this.$get=["$injector",function(a){return f(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,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){a.next().html(b.getSuccessHTML(c||b.getDefaultMsg(d).success)),f.$setValidity(f.$name,!0),e&&e()},f=function(a,c,d,e,f){a.next().html(b.getErrorHTML(c||b.getDefaultMsg(d).error)),f.$setValidity(f.$name,!1),e&&e()},g=function(a,d,g,h,i,j){var k=i+"SuccessMessage",l=i+"ErrorMessage",m=b.getExpression(i).constructor,n={success:function(){e(d,g[k],i,a.validCallback(),h)},error:function(){f(d,g[l],i,a.invalidCallback(),h)}};return m===Function?c.all([b.getExpression(i)(j)]).then(function(a){return a&&a.length>0&&a[0]?n.success():n.error()},function(){return n.error()}):m===RegExp?b.getExpression(i).test(j)?n.success():n.error():n.error()};return{restrict:"A",require:"ngModel",scope:{model:"=ngModel",validCallback:"&",invalidCallback:"&"},link:function(a,b,c,e){var f=c.validator.split(",");b.after("<span></span>"),e.$setValidity(e.$name,!1),a.$on(e.$name+"reset",function(){b.next().html("")}),f.forEach(function(d){return a.$on(e.$name+"submit",function(){var f=b[0].value;g(a,b,c,e,d,f)}),"blur"===c.validMethod?void b.bind("blur",function(){var f=b[0].value;a.$apply(function(){g(a,b,c,e,d,f)})}):void("submit"!==c.validMethod&&a.$watch("model",function(f){if(e.$pristine&&e.$viewValue)e.$setViewValue(e.$viewValue);else if(e.$pristine)return void b.next().html("");g(a,b,c,e,d,f)}))}),d(function(){c.$observe("noValidationMessage",function(a){var c=b.next();"true"==a||1==a?c.css("display","none"):("false"==a||0==a)&&c.css("display","block")})})}}}])}.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=this,f=function(e){a=e,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q")},g={required:/^.+$/,url:/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/,email:/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,number:/^\d+$/},h={required:{error:"This should be Required!!",success:"It's Required"},url:{error:"This should be Url",success:"It's Url"},email:{error:"This should be Email",success:"It's Email"},number:{error:"This should be Number",success:"It's Number"}};this.setExpression=function(a){angular.extend(g,a)},this.getExpression=function(a){return g[a]},this.setDefaultMsg=function(a){angular.extend(h,a)},this.getDefaultMsg=function(a){return h[a]},this.setErrorHTML=function(a){a.constructor===Function&&(e.getErrorHTML=a)},this.getErrorHTML=function(a){return'<p class="validation-invalid">'+a+"</p>"},this.setSuccessHTML=function(a){a.constructor===Function&&(e.getSuccessHTML=a)},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){for(var c in a)a[c].hasOwnProperty("$dirty")&&b.$broadcast(c+"submit");var f=d.defer();return f.promise.success=function(a){return f.promise.then(function(b){a(b)}),f.promise},f.promise.error=function(a){return f.promise.then(null,function(b){a(b)}),f.promise},e.checkValid(a)?f.resolve("success"):f.reject("error"),f.promise},this.reset=function(a){for(var c in a)a[c].hasOwnProperty("$dirty")&&b.$broadcast(c+"reset")},this.$get=["$injector",function(a){return f(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){a.next().html(b.showSuccessMessage?b.getSuccessHTML(c||b.getDefaultMsg(d).success):""),f.$setValidity(f.$name,!0),e&&e()},f=function(a,c,d,e,f){a.next().html(b.showErrorMessage?b.getErrorHTML(c||b.getDefaultMsg(d).error):""),f.$setValidity(f.$name,!1),e&&e()},g=function(a,d,g,h,i,j){var k=i+"SuccessMessage",l=i+"ErrorMessage",m=b.getExpression(i).constructor,n={success:function(){e(d,g[k],i,a.validCallback(),h)},error:function(){f(d,g[l],i,a.invalidCallback(),h)}};return m===Function?c.all([b.getExpression(i)(j)]).then(function(a){return a&&a.length>0&&a[0]?n.success():n.error()},function(){return n.error()}):m===RegExp&&b.getExpression(i).test(j)?n.success():n.error()};return{restrict:"A",require:"ngModel",scope:{model:"=ngModel",validCallback:"&",invalidCallback:"&"},link:function(a,b,c,e){var f=function(){},h=c.validator.split(",");b.after("<span></span>"),e.$setValidity(e.$name,!1),a.$on(e.$name+"reset",function(){f(),e.$setViewValue(null),e.$setPristine(),e.$setValidity(e.$name,!1),e.$render(),b.next().html("")}),h.forEach(function(d){return a.$on(e.$name+"submit",function(){var h=b[0].value;return"submit"===c.validMethod?(f(),void(f=a.$watch("model",function(f){void 0===f&&(f=""),g(a,b,c,e,d,f)}))):void g(a,b,c,e,d,h)}),"blur"===c.validMethod?void b.bind("blur",function(){var f=b[0].value;a.$apply(function(){g(a,b,c,e,d,f)})}):void("submit"!==c.validMethod&&"submit-only"!==c.validMethod&&a.$watch("model",function(f){if(e.$pristine&&e.$viewValue)e.$setViewValue(e.$viewValue);else if(e.$pristine)return void b.next().html("");g(a,b,c,e,d,f)}))}),d(function(){c.$observe("noValidationMessage",function(a){var c=b.next();"true"==a||1==a?c.css("display","none"):("false"==a||0==a)&&c.css("display","block")})})}}}])}.call(this);

package.json

 {
     "name": "angular-validation",
-    "version": "1.0.6",
+    "version": "1.1.0",
     "description": "Angular Validation",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,2 +0,2 @@
-angular-validation 1.0.6
+angular-validation 1.1.0
 =========================
@@ -90,3 +90,3 @@ [![Build Status](https://travis-ci.org/huei90/angular-validation.png?branch=master)](https://travis-ci.org/huei90/angular-validation)
 
-**Select the validation method `watch` `blur` `submit`, 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
@@ -107,2 +107,9 @@
 </form>
+
+<label>Submit Only method</label>
+<form name="Form">
+    <input type="text" name="number" ng-model="form.number" validator="number" valid-method="submit-only"/>
+    <button ng-click="form.submit(Form)"></button>
+</form>
+
 <script>
@@ -245,2 +252,14 @@ // ... validate method, it will check `checkValid(Form)`
 
+**disable/enable show success/error message**<br/>
+`default: true`<br/>
+Easily disable success/error message
+
+```javascript
+// your angular
+.config(function ($validationProvider) {
+    $validationProvider.showSuccessMessage = false; // or true(default)
+    $validationProvider.showErrorMessage = false; // or true(default)
+});
+```
+
 Built-in validation <small>in angular-validation</small>
@@ -322,1 +341,17 @@ ===
        https://docs.google.com/document/d/192dCUnoIBQ7-vurvPeS9BElGdxfk0Ddcof2KzDDi1Mc/edit
+
+Q & A
+=====
+1. Can I validate the form when init ? [#10](https://github.com/huei90/angular-validation/issues/10)
+
+```html
+<form name="Form">
+    <input type="text" name="number" ng-model="form.number" validator="number"/>
+    <button id="button1111" ng-click="form.submit(Form)">Show</button>
+</form>
+```
+```javascript
+$timeout(function () { // call $timeout to make sure the Form Constructor is generated
+    $validationProvider.validate($scope.Form); // $scope.Form is html form name `Form Constructor`
+});
+```

src/directive.js

@@ -19,3 +19,7 @@ (function () {
             var validFunc = function (element, validMessage, validation, callback, ctrl) {
-                element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                if ($validationProvider.showSuccessMessage) {
+                    element.next().html($validationProvider.getSuccessHTML(validMessage || $validationProvider.getDefaultMsg(validation).success));
+                } else {
+                    element.next().html('');
+                }
                 ctrl.$setValidity(ctrl.$name, true);
@@ -36,3 +40,7 @@ if (callback) callback();
             var invalidFunc = function (element, validMessage, validation, callback, ctrl) {
-                element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                if ($validationProvider.showErrorMessage) {
+                    element.next().html($validationProvider.getErrorHTML(validMessage || $validationProvider.getDefaultMsg(validation).error));
+                } else {
+                    element.next().html('');
+                }
                 ctrl.$setValidity(ctrl.$name, false);
@@ -97,3 +105,14 @@ if (callback) callback();
                 link: function (scope, element, attrs, ctrl) {
+
                     /**
+                     * watch
+                     * @type {watch}
+                     *
+                     * Use to collect scope.$watch method
+                     *
+                     * use watch() to destroy the $watch method
+                     */
+                    var watch = function () {};
+
+                    /**
                      * validator
@@ -106,3 +125,2 @@ * @type {*|Array}
 
-
                     /**
@@ -122,2 +140,15 @@ * Valid/Invalid Message
                     scope.$on(ctrl.$name + 'reset', function () {
+
+                        /**
+                         * clear scope.$watch here
+                         * when reset status
+                         * clear the $watch method to prevent
+                         * $watch again while reset the form
+                         */
+                        watch();
+
+                        ctrl.$setViewValue(null);
+                        ctrl.$setPristine();
+                        ctrl.$setValidity(ctrl.$name, false);
+                        ctrl.$render();
                         element.next().html('');
@@ -136,2 +167,21 @@ });
                             var value = element[0].value;
+
+                            if (attrs.validMethod === 'submit') {
+
+                                watch(); // clear previous scope.$watch
+                                watch = scope.$watch('model', function (value) {
+
+                                    // scope.$watch will translate '' to undefined
+                                    // undefined will pass the required submit /^.+/
+                                    // cause some error in this validation
+                                    if (value === undefined) {
+                                        value = '';
+                                    }
+
+                                    checkValidation(scope, element, attrs, ctrl, validation, value);
+                                });
+
+                                return;
+                            }
+
                             checkValidation(scope, element, attrs, ctrl, validation, value);
@@ -155,5 +205,5 @@ });
                         /**
-                         * Validate submit method
+                         * Validate submit & submit-only method
                          */
-                        if (attrs.validMethod === 'submit') {
+                        if (attrs.validMethod === 'submit' || attrs.validMethod === 'submit-only') {
                             return;
@@ -160,0 +210,0 @@ }

src/provider.js

@@ -146,2 +146,20 @@ (function () {
             /**
+             * Whether show the validation success message
+             * You can easily change this to false in your config
+             * example: $validationProvider.showSuccessMessage = false;
+             * @type {boolean}
+             */
+            this.showSuccessMessage = true;
+
+
+            /**
+             * Whether show the validation error message
+             * You can easily change this to false in your config
+             * example: $validationProvider.showErrorMessage = false;
+             * @type {boolean}
+             */
+            this.showErrorMessage = true;
+
+
+            /**
              * Check form valid, return true
@@ -206,6 +224,2 @@ * checkValid(Form): Check the specific form(Form) valid from angular `$valid`
                     if (form[k].hasOwnProperty('$dirty')) {
-                        form[k].$setViewValue(null);
-                        form[k].$setPristine();
-                        form[k].$setValidity(form[k].$name, false);
-                        form[k].$render();
                         $scope.$broadcast(k + 'reset');
@@ -232,2 +246,4 @@ }
                     getDefaultMsg: this.getDefaultMsg,
+                    showSuccessMessage: this.showSuccessMessage,
+                    showErrorMessage: this.showErrorMessage,
                     checkValid: this.checkValid,
@@ -234,0 +250,0 @@ validate: this.validate,

No alert changes

Improved metrics

Total package byte prevSize

86545

increased by10.03%

Lines of code

1404

increased by8.92%

Number of lines in readme file

354

increased by10.97%

No dependency changes