Vuelidate password validation always invalid - vue.js

Question

I really hit a wall with this issue. For an unknown reason (to me) Vuelidate doesn't validate the password field. No matter what you enter it is always invalid and I am not sure why. I tried different solutions but I always return that password is invalid. Does someone know where is the issue?
Here is the code that I am using:
<template>
<form
#submit="checkForm"
:action="this.action"
method="post"
novalidate="true"
>
<div class="app-form-wrapper mb-3 mb-md-0 pt-3 pb-1 py-md-0 rounded">
<!-- Email address -->
<div
class="form-group mb-3"
:class="{ 'form-error': $v.user.email.$error }"
>
<label for="email_login">Email address</label>
<input
type="email"
name="email"
class="form-control py-2 h-auto"
id="email_login"
ref="email"
placeholder="Your email"
aria-describedby="email_error"
v-model.trim.lazy="$v.user.email.$model"
autocomplete="off"
autofocus
/>
<div v-if="$v.user.email.$error">
<div
class="error mt-1"
id="email_error"
aria-live="assertive"
v-if="!$v.user.email.required"
>
Email address is required
</div>
</div>
</div>
<!-- Password -->
<div
class="form-group position-relative mb-0 mb-md-3"
:class="{ 'form-error': $v.user.password.$error }"
>
<div class="d-flex justify-content-between">
<label for="password_login">Password</label>
<a :href="this.forgotUrl" class=" mr-3 mr-md-0 text-muted"
><u>Forgot your password?</u></a
>
</div>
<input
:type="passwordFieldType"
name="password"
class="form-control py-2 h-auto"
id="password_login"
ref="password"
placeholder="Password"
aria-describedby="password_error"
v-model.trim.lazy="$v.user.password.$model"
autocomplete="off"
/>
<button
type="button"
id="switchVisibility"
class="position-absolute"
#click="switchVisibility"
></button>
<div v-if="$v.user.password.$error">
<div
class="error mt-1"
id="password_error"
aria-live="assertive"
v-if="$v.user.password.$dirty && !$v.user.password.required"
>
Password is required
</div>
</div>
</div>
</div>
<!-- CSRF -->
<input type="hidden" name="_token" :value="csrf" />
<!-- Submit -->
<button
class="btn btn-primary btn-lg btn-block"
type="submit"
id="loginBtn"
:disabled="submitStatus === 'PENDING'"
>
Login
</button>
<div class="text-center mt-2">
Don't have an account yet? Sign up here!
</div>
<div
class="bottom-validation--ok mt-2 text-center"
v-if="submitStatus === 'OK'"
>
Thanks for logging in!
</div>
<div
class="bottom-validation--error mt-2 text-center"
v-if="submitStatus === 'ERROR'"
>
Please fill the form correctly.
</div>
<div
class="bottom-validation--sending mt-2 text-center"
v-if="submitStatus === 'PENDING'"
>
Sending...
</div>
<div class="bottom-validation--error mt-2 text-center" v-if="errors">
<div v-for="value in errors">
{{ value }}
</div>
</div>
<hr />
<a
:href="googleUrl"
role="button"
id="btn-google"
class="btn btn-social btn-white btn-block border"
>
<svg
version="1.1"
id="google"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 533.5 544.3"
style="enable-background: new 0 0 533.5 544.3"
xml:space="preserve"
class="mr-2"
>
<path
class="st0"
d="M533.5,278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1,33.8-25.7,63.7-54.4,82.7v68h87.7
C503.9,431.2,533.5,361.2,533.5,278.4L533.5,278.4z"
/>
<path
class="st1"
d="M272.1,544.3c73.4,0,135.3-24.1,180.4-65.7l-87.7-68c-24.4,16.6-55.9,26-92.6,26c-71,0-131.2-47.9-152.8-112.3
H28.9v70.1C75.1,486.3,169.2,544.3,272.1,544.3z"
/>
<path
class="st2"
d="M119.3,324.3c-11.4-33.8-11.4-70.4,0-104.2V150H28.9c-38.6,76.9-38.6,167.5,0,244.4L119.3,324.3z"
/>
<path
class="st3"
d="M272.1,107.7c38.8-0.6,76.3,14,104.4,40.8l77.7-77.7C405,24.6,339.7-0.8,272.1,0C169.2,0,75.1,58,28.9,150
l90.4,70.1C140.8,155.6,201.1,107.7,272.1,107.7z"
/>
</svg>
<span>Log in with Google</span>
</a>
<a
:href="facebookUrl"
role="button"
id="btn-facebook"
class="btn btn-social btn-facebook btn-block shadow-sm border"
>
<svg
id="facebook"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="mr-2"
>
<path
class="st0"
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
/>
</svg>
<span>Log in with Facebook</span>
</a>
</form>
</template>
<script>
import Vuelidate from "vuelidate";
import { required } from "vuelidate/lib/validators";
//import './useragent.js';
Vue.use(Vuelidate);
export default {
props: {
action: String,
old: Object,
forgotUrl: String,
errors: Array,
facebookUrl: String,
googleUrl: String
},
data() {
return {
user: {
email: "",
password: ""
},
passwordFieldType: "password",
csrf: document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
submitStatus: null
};
},
validations: {
user: {
email: {
required
},
password: {
required
}
}
},
methods: {
checkForm(e) {
this.$v.user.$touch();
// For accessibility: focusing on the field with an error
if (this.$v.user.$invalid) {
e.preventDefault();
for (let key in Object.keys(this.$v.user)) {
const input = Object.keys(this.$v.user)[key];
if (input.includes("$")) return false;
if (this.$v.user[input].$error) {
this.$refs[input].focus();
break;
}
}
this.submitStatus = "ERROR";
} else {
return true;
}
},
switchVisibility() {
this.passwordFieldType =
this.passwordFieldType === "password" ? "text" : "password";
}
},
created() {
this.user = this.old;
}
};
</script>
<style scoped>
.form-error input {
border-color: #c91547;
}
.error,
.bottom-validation--error {
color: #c91547;
}
#switchVisibility {
bottom: 10px;
right: 10px;
background-color: transparent;
border: none;
opacity: 0.4;
font-size: 14px;
font-weight: 600;
}
#switchVisibility:focus,
#switchVisibility:active,
#switchVisibility:hover {
box-shadow: none;
outline: none;
}
input[type="password"] + button:before {
content: "Show";
}
input[type="text"] + button:before {
content: "Hide";
}
</style>

Answer 1

Try below steps it will help you to fix the issue.
Step 1: You forgot to import email from vuelidate/lib/validators
import { required, email } from 'vuelidate/lib/validators'
Step 2:
validations: {
user: {
email: { required, email },
password: { required }
}
},
Step 3: Do the validation on button click
checkForm(e) {
this.$v.$touch();
if (this.$v.$invalid) {
return // stop here if form is invalid
}
},
Step 4: Display error message in your html template
<div class="form-group mb-3" :class="{ 'form-error': $v.user.email.$error }">
<label for="email_login">Email address</label>
<input
type="email"
name="email"
class="form-control py-2 h-auto"
id="email_login"
ref="email"
placeholder="Your email"
aria-describedby="email_error"
v-model.trim.lazy="$v.user.email.$model"
autocomplete="off"
autofocus />
<div v-if="!$v.user.email.required" class="error mt-1" id="email_error" aria-live="assertive">
Email address is required
</div>
<div v-if="!$v.user.email.email" class="error mt-1" id="email_error" aria-live="assertive">
Invalid Email address
</div>
</div>
You can checkout for Vue,Vuex,Vuelidate,translation on Vue-vuex-vuelidate-i18n-registration-login-todo