javascript - Validate email address having issue in vuejs?

Question

    <button type="submit"
                      class="register-button"
                      :class="(isDisabled) ? '' : 'selected'"
                      :disabled='isDisabled'
                      v-on:click=" isFirstScreen"
                      @click="persist" >
                      PROCEED
   </button>

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: Importrequired, 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
  }
},

You can refer for demo https://github.com/Jebasuthan/vue-vuex-vuelidate-i18n-registration-login-todo