{"id":1804,"date":"2022-08-30T15:19:35","date_gmt":"2022-08-30T15:19:35","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/multiple-validation-directives-not-working-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:35","modified_gmt":"2022-08-30T15:19:35","slug":"multiple-validation-directives-not-working-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/multiple-validation-directives-not-working-collection-of-common-programming-errors\/","title":{"rendered":"Multiple validation directives not working-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m trying to write my own set of directives. I have written following two directives:<\/p>\n<ul>\n<li>eaValidateEmail (Validates the format of the email address)<\/li>\n<li>eaValidateUnique (Will validate the uniqueness by a call to a rest service once complete)<\/li>\n<\/ul>\n<p><strong>What I want to achieve:<\/strong><\/p>\n<ul>\n<li>First the eaValidateEmail directive is executed which returns false until the format of the email is correct<\/li>\n<li>Then and only then the eaValidateUnique directive should execute and check if the email address is taken already over a rest service. If the value is not found it will return true, else it will return false.<\/li>\n<\/ul>\n<p><strong>What&#8217;s happening<\/strong><\/p>\n<p>When I only add the eaValidateEmail directive, everything is working and the format of the email is validated.<\/p>\n<p>But as soon I add the eaValidateUnique directive then the eaValidateEmail directive is left out and the ctrl.$valid method of the eaValidateUnique directive is always passing even though ctrl.$valid is false in console.log.<\/p>\n<p>I have read through the AngularJS documentation, bought two books but the examples are always very basic. Currently I can&#8217;t figure out where the problem could be located. It looks like there is a clash with ngModelController but I can&#8217;t figure out the right way to solve this issue.<\/p>\n<p>I&#8217;m currently testing with the ValidateCtrlNew form. So the field in the &#8220;New&#8221; section of the html form.<\/p>\n<p><strong>Questions:<\/strong><\/p>\n<ul>\n<li>Does anybody know how to write the directives so that they are executed in serial order as I add them as attributes to the input element?<\/li>\n<li>How can I prevent such clashes with directives? Isolated scope is also no option for multiple directives.<\/li>\n<\/ul>\n<p>Here is the <strong><em>jsfiddle<\/em><\/strong>: http:\/\/jsfiddle.net\/charms\/6j3U8\/230\/<\/p>\n<pre><code>\n    \n            \n            New\n            <br \/>\n            Invalid:\n                Please enter your email.\n                This is not a valid email.\n                Checking email....\n                This email is already taken.\n                            \n        \n    \n\n\n\n.directive('eaValidateUnique', ['$http', function($http) {\n    return {\n        restrict: 'A',\n        require: 'ngModel',\n        link: function(scope, elem, attr, ctrl) {\n            ctrl.$parsers.push(function(viewValue) {\n                console.log(ctrl);\n                \/\/ctrl.$setValidity('eaValidateUnique', true);\n                if(ctrl.$valid) {\n                    ctrl.$setValidity('eaValidateUnique', false);\n                    console.log(\"valid was true\");\n                }                    \n            });\n        }\n    };\n}])\n.directive('eaValidateEmail', [function() {\n    return {\n        restrict: 'A',\n        require: 'ngModel',\n        link: function(scope, elem, attr, ctrl) {\n            var EMAIL_REGEXP = \/^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$\/;\n            ctrl.$parsers.push(function(viewValue) {\n                \/\/ set validity to true to clear out if previous validators fail\n                ctrl.$setValidity('eaValidateEmail', true);\n                if(ctrl.$valid) {\n                    \/\/ set validity to false as we need to check the value here\n                    ctrl.$setValidity('eaValidateEmail', false);\n                    if(viewValue !== undefined &amp;&amp; viewValue !== \"\" &amp;&amp; EMAIL_REGEXP.test(viewValue)) {\n                        \/\/ if the format of the email is valid then we set validity to true\n                        ctrl.$setValidity('eaValidateEmail', true);\n                        ctrl.$setValidity('eaValidateEmailCheck', true);\n                        console.log(\"TRUE\");\n                    } else {\n                        \/\/ if the format of the email is invalid we set validity to false\n                        ctrl.$setValidity('eaValidateEmail', false);\n                        ctrl.$setValidity('eaValidateEmailCheck', true);\n                        console.log(\"FALSE\");\n                    }    \n                }\n                return viewValue;\n            });\n        }\n    };\n}]);\n<\/code><\/pre>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:35:10. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m trying to write my own set of directives. I have written following two directives: eaValidateEmail (Validates the format of the email address) eaValidateUnique (Will validate the uniqueness by a call to a rest service once complete) What I want to achieve: First the eaValidateEmail directive is executed which returns false until the format of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1804","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1804"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1804\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}