Angular (JavaScript) Confirm password validation message?

Question

so i have a password and confirm password and I obviously need to match and show a message if not match.

my requirements:

the message should only show after the confirm password (second input)input.

my setup now is, when user blur out confirm password(second input) the function runs and throw err message if no match and also is dynamically hidden when user type the correct password (used onkeyup) that matches password input (first input)

problem: if the user go back and change the first input no message is shown. if I use the same onblur function on password (first input), then the message shows before I input anything in the second field (confirm password). how do i fix this?

 $onInit = () => {
        let self = this;

        this.siRole.getRoles().then((roleList) => {
            self.roleList = roleList.filter((r) => {return !r.hidden});
        }, (err) => {
            self.siAlertDialog.error(err.message);
        })
        this.hide = true;
    }

    passwordWatchOnblur = ()=>{
     this.hide =  this.newUser.password == this.newUser.confirmPassword ? true :false  
      }
    passwordWatchOnkeyup = ()=>{
          if(this.newUser.password == this.newUser.confirmPassword){
              this.hide=true;
          } 
    }

    <div layout layout-xs='column'>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.PASSWORD"></label>
          <input  ng-model='$ctrl.newUser.password' type='password'  required/>
        </md-input-container>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.CONFPASS"></label>
          <input id="confirm" ng-model='$ctrl.newUser.confirmPassword' type='password' ng-blur="$ctrl.passwordWatchOnblur()" ng-keyup="$ctrl.passwordWatchOnkeyup()" required/>
          <span ng-hide="$ctrl.hide"  class='label-error'>{{'SI-MESSAGES.PASS-NO-MATCH'|translate}}</span>
        </md-input-container>
      </div>

you can try this directive: password-check directive in angularjs — Fabio Carballo
– Fabio Carballo, Commented Jul 14, 2017 at 22:31

lealceldeiro · Accepted Answer · 2017-07-17 13:50:38Z

1

Possible solution:

Use the same onkeyup function on password (first input) and modify passwordWatchOnkeyup like tihs:

passwordWatchOnkeyup = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

Why: If there is no confirmPassword or they both are equal, then hide message.

UPDATE (added alternative for passwordWatchOnblur function)

... or you can use this (passwordWatchOnblur) function on the onblur on password (first input)

passwordWatchOnblur = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

P.S.: The content of the functions are the same. What changes is the time where they are called. With the passwordWatchOnblur being called on the onblur the message will not be shown until the user has left the input, and not while he/she is typing the password.

edited Jul 17, 2017 at 13:50

answered Jul 14, 2017 at 22:31

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

4 Comments

jsPlayer Over a year ago

nice, this works great. quick question is, is it possible to wait till customer input the confirm password , like ng-blur then as soon i change the password(first input) and or fix the password (first input), then show message( use keyup/dwn)?

lealceldeiro Over a year ago

Sure, but that would be another alternative. would you like me to update the answer with that alternative too? Basically you wouldn't call the function on onkeyup, but on blur out, this way maybe you should modify the passwordWatchOnblur following pretty much the same idea as I did with passwordWatchOnkeyup

jsPlayer Over a year ago

sure if you can please, i try to mimic it myself something i am doing is not correct

lealceldeiro Over a year ago

@AnuRajan, please checkout the UPDATED section of my answer. I just added the other alternative. They are very similar, what changes is the moment where the function is called. If any issue persists, please let me know and I will try to help you

Collectives™ on Stack Overflow

Angular (JavaScript) Confirm password validation message?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related