Custom form Validation by Vuetify Showing Error _this.$refs[f].validate is not a function - vue.js

Question

I want to make custom validation with Vuetify. My Vuetify version is 1.11.3. Here is my template. I set a ref to v-card according to this documentation.
<v-card ref="form">
<v-card-text>
<v-text-field
ref="name"
v-model="name"
label="Full Name:"
:rules="[() => !!name || 'Name is required']"
:error-messages="errorMessages"
required
light
>
</v-text-field>
<v-text-field
ref="email"
v-model="email"
label="Email Address:"
:rules="[
() => !!email || 'Email is required',
() => (!!email && /.+#.+/.test(email)) || 'Email must be valid',
]"
required
light
></v-text-field>
<VuePhoneNumberInput
ref="phone"
v-model="phone"
color="black"
dark-color="white"
size="lg"
default-country-code="BD"
light
required
/>
<v-textarea
ref="msg"
v-model="msg"
label="Message"
:rules="[() => !!msg || 'Message is required']"
light
></v-textarea>
</v-card-text>
<v-card-actions>
<v-btn #click="sendForm"> Submit </v-btn>
</v-card-actions>
</v-card>
I am trying to validate the form and textfields with their references.
This is my code:
data() {
return {
name: null,
email: null,
phone: null,
msg: null,
submitStatus: null,
formHasErrors: false,
errorMessages: '',
}
},
computed: {
form() {
return {
name: this.name,
email: this.email,
phone: this.phone,
msg: this.msg,
}
},
},
watch: {
name() {
this.errorMessages = ''
},
},
methods: {
sendForm() {
this.formHasErrors = false
Object.keys(this.form).forEach((f) => {
if (!this.form[f]) this.formHasErrors = true
this.$refs[f].validate(true)
})
}
When I submit the button, It shows
client.js?06a0:103 TypeError: _this.$refs[f].validate is not a
function
I get following error. What is the wrong with that?

Answer 1

I would recommence using V-form instead of v-card here.
Then you can check if your form is valid with the function this.$ref.myForm.validate() which returns a boolean
Here is a small example:
<v-card>
<v-card-text>
<v-form ref="myForm">
<v-row>
<v-col
cols="12"
sm="7"
>
<v-text-field
prepend-icon="mdi-tag-text"
v-model="form.name"
:rules="[
(v) => !!v || 'Name is requierd',
]"
label="Name"
/>
</v-col>
</v-row>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn
#click="check"
>
Check
</v-btn>
</v-card-actions>
</v-card>
And the script :
export default {
data: () => ({
form:{
name : ""
},
}),
methods:{
check(){
if (this.$refs.myForm.validate()){
//form is valid
} else {
//form is not valid
}
}
}
}