0

This my code pen link https://codepen.io/santoshch/pen/bGgKNWV

the code is already validating both password fields, if there is mismatch in input it display as must be identical.

But need it as For example i am entering in password field as "asdfg" and in confirm password field if i enter "asddd" then here in confirm password field, 4th character is wrong with password field, then error message should display like "must be identical".

Tried with the length, but not sure how to start.

 <label class="form__group is-required">
    <span class="form__label">Password</span>
    <input
      class="form__input" type="password" name="form-password"
      v-model="password" @input="$v.password.$touch"
    >
    <p v-if="$v.password.$dirty">
      <span class="form__alert" v-if="!$v.password.required">Required.</span>
      <span class="form__alert" v-if="!$v.password.minLength">
        {{$v.password.$params.minLength.min}} letters at least.
      </span>
    </p>
  </label>
  <!-- Repeat Password -->
  <label class="form__group is-required">
    <span class="form__label">Repeat<br>password</span>
    <input
      class="form__input" type="password" name="form-repeat-password"
      v-model="repeatPassword" @input="$v.repeatPassword.$touch"
    >
    <p v-if="$v.repeatPassword.$dirty">
      <span class="form__alert" v-if="!$v.repeatPassword.required">Required.</span>
      <span class="form__alert" v-if="!$v.repeatPassword.sameAsPassword">
        Must be identical.
      </span>
    </p>
  </label>
T dhanunjay
  • 790
  • 1
  • 13
  • 46

1 Answers1

0

Put @change on your repeatPassword input:

v-model="repeatPassword" 
@input="$v.repeatPassword.$touch" 
@change="comparePasswords" // Add this trigger

And add a method:

comparePasswords: function () {

  for (var i = 0; i < this.repeatPassword.length; i++) {
    if(this.password.charAt(i) != this.repeatPassword.charAt(i)) {
      alert("Char at pos " + (i + 1) + " does not match");
    }
  }

}

It will compare char by char.

RGriffiths
  • 5,722
  • 18
  • 72
  • 120
  • Thanks for answering. I have added the above code to codepen. But it's not reflecting any changes. if possible can you please check my https://codepen.io/santoshch/pen/bGgKNWV – T dhanunjay Apr 15 '21 at 15:01
  • OK that's fine, With using Vuelidate , is there any other way of doing that...I add code to my codepen, It's not taking :) – T dhanunjay Apr 15 '21 at 15:24
  • Does any one please provide the solution for the above question. – T dhanunjay Apr 15 '21 at 16:09
  • @taneerudhanunjay I don't understand what the issue is. Your code is working. If the confirmed password does not match the password you get the message "Must be identical". Isn't that what you want? – RGriffiths Apr 15 '21 at 16:51
  • @RGriffiths, Ya code is working fine but one more functionality need to add for confirmPassword filed. i.e, in confirmpassword field, I need to check each and every character with password field,and then i need to display at which character we have entered wrong. – T dhanunjay Apr 15 '21 at 17:00
  • Changed the answer. It seems a little unnecessary but this might help you. – RGriffiths Apr 15 '21 at 17:21