Angularjs: matching password fires too quickly?

Question

I am trying to match two text field password whick looks like this:

pwCheck.js

angular.module('installApp')
.directive('pwCheck', function ($http) {
  return {
   require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      var firstPassword = '#' + attrs.pwCheck;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
                ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
            });
        });
      }
   }
});

accounts.html

<label>{{label.password}}</label>
   <input type="password"  class="form-control" id="pw1" name="pw1"  ng-model-options="{updateOn:'blur'}" ng-model="user.password" required ></input>

<label>{{label.retypePassword}}</label>
   <input type="password" class="form-control" id="pw2" name="pw2" ng-model-options="{updateOn:'blur'}" ng-model="pw2" ng-required="" pw-check="pw1"></input>

<div class="msg-block" ng-show="signupform.$error"><img src = "./images/error-icon.png" width = "25" height = "25" ng-show="signupform.pw2.$error.pwmatch"></img><span class="msg-error" ng-show="signupform.pw2.$error.pwmatch">Passwords don't match.</span></div>

The above code is working fine as expected but gives a horrible user experience. That happen because when I type in the first textfield the message "Password don't match" will show even the user does not finish typing.

The problem is that the validation happens too quickly, before the user has finished typing.

I have tried to solve this by adding ng-model-options="{updateOn:'blur'}" but the problem is still exist.

Help! Thanks in advance

If using angular 1.3+, you can also look into using the ng-model-options debounce option. — Joe Enzminger
– Joe Enzminger, Commented Mar 3, 2015 at 4:23

Jenish Rabadiya · Accepted Answer · 2015-03-03 04:24:00Z

1

Use blur instead of key up. Try following:

angular.module('installApp')
.directive('pwCheck', function ($http) {
  return {
   require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      var firstPassword = '#' + attrs.pwCheck;
        elem.on('blur', function () {
          scope.$apply(function () {
                ctrl.$setValidity('pwmatch', elem.val() === $(firstPassword).val());
            });
        });
      }
   }
});

Note: Removed add method on elem. Will throw error because there no add method defined on element.

answered Mar 3, 2015 at 4:24

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

Angularjs: matching password fires too quickly?

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