I am facing an issue with my emailValidation method. Even though I want it to run when
this.$refs.editUserForm.validate('email')
returns true, it always seems to return false, especially when a valid email like <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f993989a92b9818083d79a96">[email protected]</a>
is entered. Can someone help me figure out how to properly validate a single field in a form?
<template>
<v-form ref="editUserForm" :model="user" data-app>
<v-text-field
v-model="user.first_name"
label="First Name"
:rules="firstNameRules"
class="required"
required
>
</v-text-field>
<v-text-field
v-model="user.email"
label="Email"
:rules="emailRules"
name="email"
class="required"
required
@blur="emailValidation"
>
</v-text-field>
</v-form>
</template>
<script>
export default {
data: function () {
return {
client: {
first_name: '',
email: ''
},
firstNameRules: [
value => !!value || 'Please enter a first name'
],
emailRules: [
v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must
be valid'
]
};
},
methods: {
emailValidation(){
if (this.$refs.editUserForm.validate('email')) {
console.log("Valid")
}
else {
console.log("Not Valid")
}
}
}
};
</script>