Custom password validation directive not applying

Question

I'm working with AngularJS and I want to make a password confirmation field to check if both entries match. In order to do that, I'm using a custom directive from this tutorial: http://odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspx.

For some reason, the matching checking doesn't give any result. When I enter different passwords, it still sees the fields as valid. I think I'm missing something about the usage of custom directives in AngularJS, but it's a bit confusing because I'm litterally taking the exact same code as in the tutorial.

I also checked related questions here on SO, but no luck either.

HTML:

<div ng-app="myApp">
  <h1>Register!</h1>
    <form name="registrationForm" novalidate>
       <div class="form-group">
            <label>User Name</label>
            <input type="text" name="username" class="form-control" ng-model="registration.user.username" required />
            <p ng-show="registrationForm.username.$error.required">Required<br/><br/></p>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="password" class="form-control" ng-model="registration.user.password" required />
            <p ng-show="registrationForm.password.$error.required">Required<br/><br/></p>
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" name="confirmPassword" class="form-control" ng-model="registration.user.confirmPassword" required compare-to="registration.user.password" />
            <p ng-show="registrationForm.confirmPassword.$error.required">Required<br/><br/></p>
            <p ng-show="registrationForm.confirmPassword.$error.compareTo">Passwords must match !</p>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Register!</button>
        </div>
    </form>
</div>

JS:

angular.module('myApp', [])

.directive('compareTo', function(){
      return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function(scope, element, attributes, ngModel) {

            ngModel.$validators.compareTo = function(modelValue) {
                return modelValue == scope.otherModelValue;
            };

            scope.$watch("otherModelValue", function() {
                ngModel.$validate();
            });
        }
      };
    })

JSFiddle showing the problem: http://jsfiddle.net/ptb01eak/

Working Plunkr from the tutorial: http://plnkr.co/edit/FipgiTUaaymm5Mk6HIfn?p=preview

Thank you for your help!

So many differences between the above plunker and fiddle code. Just make sure to be no differences — Ram_T
– Ram_T, Commented Jun 12, 2017 at 9:34

JeanJacques · Accepted Answer · 2017-06-12 12:50:47Z

1

The problem comes from your AngularJS version, I updated it in the jsfiddle to : AngularJS 1.5.6 (CDN link) and it works (new jsfiddle).

answered Jun 12, 2017 at 12:50

JeanJacques

1,7501 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom password validation directive not applying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related