3rd Party Addon is not working with $scope example.

[sonphnt]

Hi ghiscoding,

Your example about 3rd Party Addon is working fine with the way using 'vm' and controllerAs. But it did not work correctly with the way using $scope like the other examples.

My example has 2 controls. Textbox and 3rd party dropdown. And only Textbox is validated.
I have attached my example. Can you please have a look what i am doing wrong or missing?

3rd Party Addon.zip

Thank you very much

[ghiscoding]

Without looking at your example and since you mentioned the using as vm. Did you pass the $scope to the ValidationService?
You can pass the $scope like these 2 ways (combined also works):

var validationService = new ValidationService({ scope: $scope, isolatedScope: $scope });

It helps in some cases to define it, give it a try.

If that doesn't help, could you make a Plunker? It's usually the best way to troubleshoot someone else code (and since I'm at work, I won't open external zip).

[sonphnt]

Hi,
I have made a plunker at http://plnkr.co/edit/ovuqlUiiAjxLr80e26un?p=preview

But it is not allowed to save if I put this scripts in body html. Can you copy this script reference to body and test?
<!-- external librairies CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <!-- angular-translate --> <!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate --> <script src="https://rawgit.com/ghiscoding/angular-validation/master/vendors/angular-translate/angular-translate.min.js"></script> <script src="https://rawgit.com/ghiscoding/angular-validation/master/vendors/angular-translate/angular-translate-loader-static-files.min.js"></script> <!-- ngTagsInput --> <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script> <!-- AngularJS Dropdown MultiSelect --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script type="text/javascript" src="https://rawgit.com/pc035860/angular-highlightjs/master/angular-highlightjs.js"></script> <script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script> <!-- AngularJS Multi-Select --> <script src="https://rawgit.com/isteven/angular-multi-select/master/isteven-multi-select.js"></script> <!-- angular-validation --> <script type="text/javascript" src="https://rawgit.com/ghiscoding/angular-validation/master/dist/angular-validation.min.js"></script> <!-- my application --> <script type="text/javascript" src="app.js"></script>

Thanks

[ghiscoding]

So here's a quick fix, I won't go into much details but passing the $scope or the vm is most often the best way to validate the form. Passing the full form name doesn't always work for some unknown reason, however passing directly the $scope always works.

From your example, I changed this

$scope.submit = function () {
        if (validationService.checkFormValidity($scope.test)) {
            alert('valid');
        }
    };

to this

$scope.submit = function () {
        // only pass the $scope or vm
        if (validationService.checkFormValidity($scope)) {
            alert('valid');
        }
    };

Give it a try and please close the issue if that fixes it. Thanks

[sonphnt]

Hi ghiscoding,

It worked with your code but it seems like checking validation entire view with function checkFormValidity(). I have 2 forms in a route view with Login view and Create new member view. I have 2 buttons to submit of each form and each button should only validate its elements.

Any solution about this?

Thanks

[ghiscoding]

Typically your code is suppose to work but I know that there's a little problem with passing the form's name, however I don't really have time to investigate the problem which why I have you the code to pass directly the $scope object.

How the Angular-Validation is suppose to work is to create a $validationSummary under the $scope and under the $scope.formName objects, and then the ValidationService checks for any invalid inputs (on the $scope or on the $scope.formName depending on which one you pass to the checkFormValidity(). However what's happening currently is that only the $scope gets the $validationSummary and not the form (it doesn't misbehave all the time, just sometime like in your case) and I didn't have time to investigate further of why it doesn't work all the time.

That's the explanation of why it doesn't work, however not a full answer to your question

[ghiscoding]

Sorry for the long delay, I finally took some time to work on this issue. Your Plunker helped me put a fix in place, and it is now fully working with passing the $scope.formName on the checkformValidity($scope.formName) and this should also help you with multiple forms in the page.

Thanks for your patience and please update to your project to latest version 1.5.11

[ghiscoding]

A small issue was created by prior version, please update to version 1.5.12 to be on the safe side.

Could you also close the issue, if this fixes it. Thanks