From 66d12aa73d8961016073fbaed4c069864e9096ca Mon Sep 17 00:00:00 2001 From: Porawit Poboonma Date: Thu, 4 Feb 2016 16:08:07 +0700 Subject: [PATCH 1/8] add validator-async supports --- src/angular-validator.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/angular-validator.js b/src/angular-validator.js index 0ac0e0d..e1a69b9 100644 --- a/src/angular-validator.js +++ b/src/angular-validator.js @@ -14,7 +14,7 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' var need_to_recompile = false; // Iterate through all the children of the form element and add a `name` attribute to the ones - // that are missing it. + // that are missing it. angular.forEach(element.find('input,select,textarea'), function(child_element) { child_element = $(child_element); if (!child_element.attr('name')) { @@ -31,7 +31,7 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' need_to_recompile = true; } - // We need to recompile so that the passed scope is updated with the new form names. + // We need to recompile so that the passed scope is updated with the new form names. if (need_to_recompile) { $compile(element)(scope); return; @@ -92,10 +92,10 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' }; - // Setup watches on all form fields + // Setup watches on all form fields setupWatches(DOMForm); - // Check if there is invalid message service for the entire form; + // Check if there is invalid message service for the entire form; // if yes, return the injected service; if no, return false; function hasFormInvalidMessage(formElement) { if (formElement && 'invalid-message' in formElement.attributes) { @@ -127,6 +127,11 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' }); } + // setup async validator using angular's $asyncValidators (need angular v1.3+) + if ('validator-async' in elementToWatch.attributes && typeof scopeForm[elementToWatch.name].$asyncValidators.callback !== 'function') { + scopeForm[elementToWatch.name].$asyncValidators.callback = scope.$eval(elementToWatch.attributes['validator-async'].value) + } + var watch = scope.$watch(function() { return elementToWatch.value + elementToWatch.required + scopeForm.submitted + checkElementValidity(elementToWatch) + getDirtyValue(scopeForm[elementToWatch.name]) + getValidValue(scopeForm[elementToWatch.name]); }, @@ -161,7 +166,7 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' return element.$dirty; } } - + // Returns the $valid value of the element if it exists function getValidValue(element) { if (element && "$valid" in element) { @@ -194,14 +199,14 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' }; // Make sure the element is a form field and not a button for example - // Only form elements should have names. + // Only form elements should have names. if (!(element.name in scopeForm)) { return; } var scopeElementModel = scopeForm[element.name]; - // Remove all validation messages + // Remove all validation messages var validationMessageElement = isValidationMessagePresent(element); if (validationMessageElement) { validationMessageElement.remove(); @@ -259,7 +264,7 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' // depending on the validity of the element and the submitted state of the form function updateValidationClass(element) { // Make sure the element is a form field and not a button for example - // Only form fields should have names. + // Only form fields should have names. if (!(element.name in scopeForm)) { return; } @@ -286,4 +291,4 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' } }; } -]); \ No newline at end of file +]); From 341ff3a1f4deda37465b2413fb7893182804a229 Mon Sep 17 00:00:00 2001 From: Porawit Poboonma Date: Thu, 4 Feb 2016 16:08:48 +0700 Subject: [PATCH 2/8] bumo up demo's angular version to 1.4 --- demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index f2d3bfc..389cb9d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -188,8 +188,8 @@

Scope Sneak Peak

Form submitted: {{myForm.submitted}}

- + - \ No newline at end of file + From 683c62bc3600d3b761d20e0de766c40774642b1a Mon Sep 17 00:00:00 2001 From: Porawit Poboonma Date: Thu, 4 Feb 2016 16:51:05 +0700 Subject: [PATCH 3/8] add demo on async validator --- demo/app.js | 12 +++- demo/index.html | 11 ++++ demo/service/john.json | 5 ++ dist/angular-validator.js | 116 ++++++++++++++++++++++------------ dist/angular-validator.min.js | 2 +- 5 files changed, 102 insertions(+), 44 deletions(-) create mode 100644 demo/service/john.json diff --git a/demo/app.js b/demo/app.js index 5f78e45..48856a2 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,7 +1,7 @@ angular.module('angular-validator-demo', ['angularValidator']); -angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) { +angular.module('angular-validator-demo').controller('DemoCtrl', function($scope, $http) { $scope.submitMyForm = function() { alert("Form submitted"); @@ -20,6 +20,14 @@ angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) }; + $scope.userAsyncValidator = function(modelValue, viewValue) { + var endpoint = 'service/' + encodeURIComponent(modelValue) + '.json'; + + // assuming all 200 response is valid, and 404 is invalid + return $http.get(endpoint); + } + + $scope.passwordValidator = function(password) { if (!password) { @@ -52,4 +60,4 @@ angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) } } }; -}); \ No newline at end of file +}); diff --git a/demo/index.html b/demo/index.html index 389cb9d..15d7c0f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -67,6 +67,17 @@

Different types of validation:

validate-on="dirty" required> +
+ +
+
+
diff --git a/demo/service/john.json b/demo/service/john.json new file mode 100644 index 0000000..ac855fe --- /dev/null +++ b/demo/service/john.json @@ -0,0 +1,5 @@ +{ + "username": "john", + "first_name": "John", + "last_name": "Doe" +} diff --git a/dist/angular-validator.js b/dist/angular-validator.js index 5838d66..e1a69b9 100644 --- a/dist/angular-validator.js +++ b/dist/angular-validator.js @@ -5,6 +5,37 @@ angular.module('angularValidator').directive('angularValidator', ['$injector', ' return { restrict: 'A', link: function(scope, element, attrs, fn) { + var getRandomInt = function() { + return Math.floor((Math.random() * 100000)); + }; + + // For this directive to work the form needs a name attribute as well as every input element. + // This function will add names where missing + var need_to_recompile = false; + + // Iterate through all the children of the form element and add a `name` attribute to the ones + // that are missing it. + angular.forEach(element.find('input,select,textarea'), function(child_element) { + child_element = $(child_element); + if (!child_element.attr('name')) { + child_element.attr('name', getRandomInt()); + console.log('WARNING! AngularValidator -> One of your form elements(,