diff --git a/bower.json b/bower.json index ec926fa..55c64de 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,14 @@ ], "description": "Client-side Validation for AngularJS", "main": "dist/angular-validation.js", - "keywords": ["angular", "angularjs", "validation", "angular validation", "validator", "client-side"], + "keywords": [ + "angular", + "angularjs", + "validation", + "angular validation", + "validator", + "client-side" + ], "license": "MIT", "ignore": [ "**/.*", @@ -15,5 +22,9 @@ "bower_components", "test", "tests" - ] + ], + "dependencies": { + "bootstrap": "~3.3.6", + "ui-bootstrap": "~0.14.3" + } } diff --git a/demo/demo.js b/demo/demo.js index 368fce7..1e362cc 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,5 +1,5 @@ (function() { - angular.module('myApp', ['validation', 'validation.rule']) + angular.module('myApp', ['validation', 'validation.rule', 'ui.bootstrap', 'ui.bootstrap.tpls']) // ------------------- // config phase @@ -150,6 +150,20 @@ checkValid: $validationProvider.checkValid }; + $scope.form7 = { + dt: new Date(), + open: function($event) { + $scope.form7.status.opened = true; + }, + dateOptions: { + formatYear: 'yy', + startingDay: 1 + }, + status: { + opened: false + } + }; + // Callback method $scope.success = function(message) { alert('Success ' + message); diff --git a/dist/angular-validation.js b/dist/angular-validation.js index c7ed34f..f5f18ea 100644 --- a/dist/angular-validation.js +++ b/dist/angular-validation.js @@ -331,6 +331,7 @@ var $validationProvider = $injector.get('$validation'); var $q = $injector.get('$q'); var $timeout = $injector.get('$timeout'); + var $parse = $injector.get('$parse'); /** * Do this function if validation valid @@ -341,11 +342,12 @@ * @param ctrl * @returns {} */ - var validFunc = function(element, validMessage, validation, scope, ctrl) { + var validFunc = function(element, validMessage, validation, scope, ctrl, attrs) { var messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).success; + var validCallback = $parse('success'); var messageElem; - if (scope.messageId) messageElem = angular.element(document.querySelector('#' + scope.messageId)); + if (attrs.messageId) messageElem = angular.element(document.querySelector('#' + attrs.messageId)); else messageElem = element.next(); if (element.attr('no-validation-message')) { @@ -358,7 +360,7 @@ } ctrl.$setValidity(ctrl.$name, true); - if (scope.validCallback) scope.validCallback({ + if (validCallback) validCallback({ message: messageToShow }); if ($validationProvider.validCallback) $validationProvider.validCallback(element); @@ -376,11 +378,12 @@ * @param ctrl * @returns {} */ - var invalidFunc = function(element, validMessage, validation, scope, ctrl) { + var invalidFunc = function(element, validMessage, validation, scope, ctrl, attrs) { var messageToShow = validMessage || $validationProvider.getDefaultMsg(validation).error; + var invalidCallback = $parse('error'); var messageElem; - if (scope.messageId) messageElem = angular.element(document.querySelector('#' + scope.messageId)); + if (attrs.messageId) messageElem = angular.element(document.querySelector('#' + attrs.messageId)); else messageElem = element.next(); if (element.attr('no-validation-message')) { @@ -393,7 +396,7 @@ } ctrl.$setValidity(ctrl.$name, false); - if (scope.invalidCallback) scope.invalidCallback({ + if (invalidCallback) invalidCallback({ message: messageToShow }); if ($validationProvider.invalidCallback) $validationProvider.invalidCallback(element); @@ -432,7 +435,7 @@ var expression = $validationProvider.getExpression(validator); var valid = { success: function() { - validFunc(element, attrs[successMessage], validator, scope, ctrl); + validFunc(element, attrs[successMessage], validator, scope, ctrl, attrs); if (leftValidation.length) { return checkValidation(scope, element, attrs, ctrl, leftValidation, value); } else { @@ -440,7 +443,7 @@ } }, error: function() { - return invalidFunc(element, attrs[errorMessage], validator, scope, ctrl); + return invalidFunc(element, attrs[errorMessage], validator, scope, ctrl, attrs); } }; @@ -483,13 +486,6 @@ return { restrict: 'A', require: 'ngModel', - scope: { - model: '=ngModel', - initialValidity: '=initialValidity', - validCallback: '&', - invalidCallback: '&', - messageId: '@' - }, link: function(scope, element, attrs, ctrl) { /** * watch @@ -526,7 +522,7 @@ /** * Default Valid/Invalid Message */ - if (!scope.messageId) element.after(''); + if (!attrs.messageId) element.after(''); /** * Set custom initial validity @@ -551,7 +547,7 @@ ctrl.$setPristine(); ctrl.$setValidity(ctrl.$name, undefined); ctrl.$render(); - if (scope.messageId) angular.element(document.querySelector('#' + scope.messageId)).html(''); + if (attrs.messageId) angular.element(document.querySelector('#' + attrs.messageId)).html(''); else element.next().html(''); }); }); @@ -572,9 +568,9 @@ if (attrs.validMethod === 'submit') { // clear previous scope.$watch watch(); - watch = scope.$watch('model', function(value, oldValue) { - value = ctrl.$viewValue; - + watch = scope.$watch(function() { + return scope.$eval(attrs.ngModel); + }, function(value, oldValue) { // don't watch when init if (value === oldValue) { return; @@ -612,7 +608,7 @@ */ if (attrs.validMethod === 'blur') { element.bind('blur', function() { - var value = ctrl.$viewValue; + var value = scope.$eval(attrs.ngModel); scope.$apply(function() { checkValidation(scope, element, attrs, ctrl, validation, value); }); @@ -632,8 +628,9 @@ * Validate watch method * This is the default method */ - scope.$watch('model', function(value) { - value = ctrl.$viewValue; + scope.$watch(function() { + return scope.$eval(attrs.ngModel); + }, function(value) { /** * dirty, pristine, viewValue control here */ @@ -642,7 +639,7 @@ ctrl.$setViewValue(ctrl.$viewValue); } else if (ctrl.$pristine) { // Don't validate form when the input is clean(pristine) - if (scope.messageId) angular.element(document.querySelector('#' + scope.messageId)).html(''); + if (attrs.messageId) angular.element(document.querySelector('#' + attrs.messageId)).html(''); else element.next().html(''); return; } @@ -655,7 +652,7 @@ */ attrs.$observe('noValidationMessage', function(value) { var el; - if (scope.messageId) el = angular.element(document.querySelector('#' + scope.messageId)); + if (attrs.messageId) el = angular.element(document.querySelector('#' + attrs.messageId)); else el = element.next(); if (value === 'true' || value === true) el.css('display', 'none'); else if (value === 'false' || value === false) el.css('display', 'block'); diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js index 119f1a8..e8bad40 100644 --- a/dist/angular-validation.min.js +++ b/dist/angular-validation.min.js @@ -1 +1 @@ -(function(){angular.module("validation",["validation.provider","validation.directive"]),angular.module("validation.provider",[]),angular.module("validation.directive",["validation.provider"])}).call(this),function(){function a(){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'
'+a+"
"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return''+a+"
"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return!(!a||!a.$valid)},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.validCallback=null,this.invalidCallback=null,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,validCallback:this.validCallback,invalidCallback:this.invalidCallback,reset:this.reset}}]}angular.module("validation.provider").provider("$validation",a)}.call(this),function(){function a(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)})})}}}angular.module("validation.directive").directive("validationReset",a),a.$inject=["$injector"]}.call(this),function(){function a(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)})})})}}}angular.module("validation.directive").directive("validationSubmit",a),a.$inject=["$injector"]}.call(this),function(){function a(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(),a.attr("no-validation-message")?g.css("display","none"):b.showSuccessMessage&&h?(g.html(b.getSuccessHTML(h)),g.css("display","")):g.css("display","none"),f.$setValidity(f.$name,!0),e.validCallback&&e.validCallback({message:h}),b.validCallback&&b.validCallback(a),!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(),a.attr("no-validation-message")?g.css("display","none"):b.showErrorMessage&&h?(g.html(b.getErrorHTML(h)),g.css("display","")):g.css("display","none"),f.$setValidity(f.$name,!1),e.invalidCallback&&e.invalidCallback({message:h}),b.invalidCallback&&b.invalidCallback(a),!1},g={},h=function(a,d,g,i,j,k){var l=j.slice(0),m=l[0].trim(),n=m.indexOf("="),o=-1===n?m:m.substr(0,n),p=-1===n?null:m.substr(n+1),q=l.slice(1),r=o+"SuccessMessage",s=o+"ErrorMessage",t=b.getExpression(o),u={success:function(){return e(d,g[r],o,a,i),q.length?h(a,d,g,i,q,k):!0},error:function(){return f(d,g[s],o,a,i)}};return void 0===t?(console.error('You are using undefined validator "%s"',o),q.length?h(a,d,g,i,q,k):void 0):t.constructor===Function?c.all([b.getExpression(o)(k,a,d,g,p)]).then(function(a){return a&&a.length>0&&a[0]?u.success():u.error()},function(){return u.error()}):t.constructor===RegExp&&void 0!==k&&null!==k&&b.getExpression(o).test(k)?u.success():u.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();return"boolean"==typeof a.initialValidity&&(f=a.initialValidity),a.messageId||b.after(""),e.$setValidity(e.$name,f),a.$on(e.$name+"reset-"+l,function(){i(),d(function(){e.$setViewValue(""),e.$setPristine(),e.$setValidity(e.$name,void 0),e.$render(),a.messageId?angular.element(document.querySelector("#"+a.messageId)).html(""):b.next().html("")})}),a.$on(e.$name+"submit-"+l,function(f,j){var l=e.$viewValue,m=!1;m=h(a,b,c,e,k,l),"submit"===c.validMethod&&(i(),i=a.$watch("model",function(d,f){d=e.$viewValue,d!==f&&((void 0===d||null===d)&&(d=""),m=h(a,b,c,e,k,d))}));var n=function(a){a?delete g[j]:(g[j]=b[0],d(function(){g[Math.min.apply(null,Object.keys(g))].focus()},0))};m.constructor===Object?m.then(n):n(m)}),"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(d=e.$viewValue,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")})})))}}}angular.module("validation.directive").directive("validator",a),a.$inject=["$injector"]}.call(this); \ No newline at end of file +(function(){angular.module("validation",["validation.provider","validation.directive"]),angular.module("validation.provider",[]),angular.module("validation.directive",["validation.provider"])}).call(this),function(){function a(){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''+a+"
"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return''+a+"
"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return!(!a||!a.$valid)},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.validCallback=null,this.invalidCallback=null,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,validCallback:this.validCallback,invalidCallback:this.invalidCallback,reset:this.reset}}]}angular.module("validation.provider").provider("$validation",a)}.call(this),function(){function a(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)})})}}}angular.module("validation.directive").directive("validationReset",a),a.$inject=["$injector"]}.call(this),function(){function a(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)})})})}}}angular.module("validation.directive").directive("validationSubmit",a),a.$inject=["$injector"]}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$q"),d=a.get("$timeout"),e=a.get("$parse"),f=function(a,c,d,f,g,h){var i,j=c||b.getDefaultMsg(d).success,k=e("success");return i=h.messageId?angular.element(document.querySelector("#"+h.messageId)):a.next(),a.attr("no-validation-message")?i.css("display","none"):b.showSuccessMessage&&j?(i.html(b.getSuccessHTML(j)),i.css("display","")):i.css("display","none"),g.$setValidity(g.$name,!0),k&&k({message:j}),b.validCallback&&b.validCallback(a),!0},g=function(a,c,d,f,g,h){var i,j=c||b.getDefaultMsg(d).error,k=e("error");return i=h.messageId?angular.element(document.querySelector("#"+h.messageId)):a.next(),a.attr("no-validation-message")?i.css("display","none"):b.showErrorMessage&&j?(i.html(b.getErrorHTML(j)),i.css("display","")):i.css("display","none"),g.$setValidity(g.$name,!1),k&&k({message:j}),b.invalidCallback&&b.invalidCallback(a),!1},h={},i=function(a,d,e,h,j,k){var l=j.slice(0),m=l[0].trim(),n=m.indexOf("="),o=-1===n?m:m.substr(0,n),p=-1===n?null:m.substr(n+1),q=l.slice(1),r=o+"SuccessMessage",s=o+"ErrorMessage",t=b.getExpression(o),u={success:function(){return f(d,e[r],o,a,h,e),q.length?i(a,d,e,h,q,k):!0},error:function(){return g(d,e[s],o,a,h,e)}};return void 0===t?(console.error('You are using undefined validator "%s"',o),q.length?i(a,d,e,h,q,k):void 0):t.constructor===Function?c.all([b.getExpression(o)(k,a,d,e,p)]).then(function(a){return a&&a.length>0&&a[0]?u.success():u.error()},function(){return u.error()}):t.constructor===RegExp&&void 0!==k&&null!==k&&b.getExpression(o).test(k)?u.success():u.error()},j=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},k=function(){return j()+j()+j()+j()};return{restrict:"A",require:"ngModel",link:function(a,b,c,e){var f,g=function(){},j=c.validator.split(","),l=e.validationId=k();return"boolean"==typeof a.initialValidity&&(f=a.initialValidity),c.messageId||b.after(""),e.$setValidity(e.$name,f),a.$on(e.$name+"reset-"+l,function(){g(),d(function(){e.$setViewValue(""),e.$setPristine(),e.$setValidity(e.$name,void 0),e.$render(),c.messageId?angular.element(document.querySelector("#"+c.messageId)).html(""):b.next().html("")})}),a.$on(e.$name+"submit-"+l,function(f,k){var l=e.$viewValue,m=!1;m=i(a,b,c,e,j,l),"submit"===c.validMethod&&(g(),g=a.$watch(function(){return a.$eval(c.ngModel)},function(d,f){d!==f&&((void 0===d||null===d)&&(d=""),m=i(a,b,c,e,j,d))}));var n=function(a){a?delete h[k]:(h[k]=b[0],d(function(){h[Math.min.apply(null,Object.keys(h))].focus()},0))};m.constructor===Object?m.then(n):n(m)}),"blur"===c.validMethod?void b.bind("blur",function(){var d=a.$eval(c.ngModel);a.$apply(function(){i(a,b,c,e,j,d)})}):void("submit"!==c.validMethod&&"submit-only"!==c.validMethod&&(a.$watch(function(){return a.$eval(c.ngModel)},function(d){if(e.$pristine&&e.$viewValue)e.$setViewValue(e.$viewValue);else if(e.$pristine)return void(c.messageId?angular.element(document.querySelector("#"+c.messageId)).html(""):b.next().html(""));i(a,b,c,e,j,d)}),d(function(){c.$observe("noValidationMessage",function(a){var d;d=c.messageId?angular.element(document.querySelector("#"+c.messageId)):b.next(),"true"===a||a===!0?d.css("display","none"):("false"===a||a===!1)&&d.css("display","block")})})))}}}angular.module("validation.directive").directive("validator",a),a.$inject=["$injector"]}.call(this); \ No newline at end of file diff --git a/index.html b/index.html index 103ae69..a77edcc 100644 --- a/index.html +++ b/index.html @@ -30,8 +30,14 @@