Vuelidate password and confirm password in Vuejs?

Question

export default {
  name: "HelloWworld",

  data: function () {
    return {
      
      isHidden: false,
      isWelcome: false,
      isFadeout: false,
      
      }
      }

<div  v-if="!isHidden">
 //some code for screen1
 
  <button v-on:click="isHidden = true"> HELLO</button>
  </div>
  
   <div  v-else-if="isHidden && !isFadeout">
 //some code for screen 2
 
  <button v-on:click="isFadeout = true"> Hi</button>
  </div>
  
   <div  v-else-if="isFadeout && isHidden && !isWelcome">
 <input
            :type="passwordFieldType"
            v-model="user.password"
            id="password"
            name="password"
            class="input-section-three"
            :class="{ 'is-invalid': submitted && $v.user.password.$error }"
            placeholder="Enter new password"
            :maxlength="maxpassword"
            v-on:keypress="isPassword($event)"
          />

<div
            v-if="submitted && $v.user.password.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.password.required">Password is required</span>
            <span v-if="!$v.user.password.minLength"
              >Minimum 8 character with
                        alphanumeric along with 1 capital letter, 1 small letter
                        and 1 special character at least</span
            >
          </div>

   <input
            :type="passwordFieldTypetwo"
            v-model="user.confirmPassword"
            id="confirmPassword"
            name="confirmPassword"
            class="input-section-three"
            :class="{
              'is-invalid': submitted && $v.user.confirmPassword.$error
            }"
            placeholder="Confirm password"
            :maxlength="maxconfirmpassword"
            v-on:keypress="isconfirmPassword($event)"
            :disabled="user.password.length < 8"
          />
           <div
            v-if="submitted && $v.user.confirmPassword.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.confirmPassword.required"
              >Confirm Password is required</span
            >
            <span v-else-if="!$v.user.confirmPassword.sameAsPassword"
              >Password must match</span
            >
          </div>
          
 <button             v-on:click="isWelcome = user.confirmPassword.length >= 8"
 > SUBMIT </button>
  </div>
  
   <div  v-else-if="isWelcome">
 //some code for screen 4
 
  <button>Fine</button>
  </div>

The issue is, Initially if i click on submit button in screen3, validations are working fine but in the password confirmation field if i enter password which is not matching, but if exceed 8 characters. it is redirecting to 4th screen. But what i am trying to do is if password is matching with confirm password field then only need to redirect to 4th screen.

Answer 1

Try below steps it will help you to fix the issue.

Step 1: Install vuelidate using npm install --save vuelidate

Step 2: Register vuelidate in main.js

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Step 3: Import required, email, minLength, sameAs from vuelidate/lib/validators

import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'

Step 4: Add validations

validations: {
 user: {
   name: { required },
   email: { required, email },
   password: { required, minLength: minLength(6) },
   confirmPassword: { required, sameAsPassword: sameAs('password') }
 }
},

Step 4: Do the validation on button click

methods: {
  submitRegistration () {
  this.submitted = true
  this.$v.$touch()
  if (this.$v.$invalid) {
    return false // stop here if form is invalid
  } else {
    alert('Form Valid')
  }
}
}

Step 5: Design html template

  <template>
  <div>
    <form @submit.prevent="submitRegistration" novalidate>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="First Name" value="" v-model="user.name" />
        <div v-if="this.submitted && !$v.user.name.required" class="invalid-feedback left">Enter Username</div>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Enter your company email ID" value="" v-model="user.email" autocomplete="off"/>
        <div v-if="this.submitted && $v.user.email.$error" class="invalid-feedback left">
          <span v-if="!$v.user.email.required">Email is required</span>
          <span v-if="user.email && !$v.user.email.email">Enter valid email address</span>
          <span v-if="user.email && $v.user.email.email && !$v.user.email.maxLength">Email is allowed only 30 characters</span>
        </div>
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Enter Password" value="" v-model="user.password" autocomplete="off" />
        <div v-if="this.submitted && $v.user.password.$error" class="invalid-feedback left">
          <span v-if="!$v.user.password.required">Password is required</span>
          <span v-if="user.password && !$v.user.password.minLength">Password must be minimum 6 characters</span>
        </div>
      </div>
      <div class="form-group">
        <input type="password" class="form-control"  placeholder="Confirm Password" value="" v-model="user.confirmPassword" autocomplete="off" />
        <div v-if="this.submitted && $v.user.confirmPassword.$error" class="invalid-feedback left">
          <span v-if="!$v.user.confirmPassword.required">Confirm Password is required</span>
          <span v-if="user.confirmPassword && !$v.user.confirmPassword.sameAsPassword">Password and Confirm Password should match</span>
        </div>
      </div>
      <input type="submit" class="btnRegister" value="Register" :disabled="this.isDisabled" />
    </form>
  </div>
</template>

Step 6: Button disabled till the form is valid

created () {
  this.submitted = true
  return this.$v.$touch()
},
computed: {
  isDisabled () {
    return this.$v.$invalid
  }
},

DEMO