Learn how to force validation of a specific field with Vuetify. This guide will show you how you can force to validate specific Vuetify fields. In Vuetify to force validate any specific fields you can declare the ref attribute to the field component and force validate it with the this.$refs.refName.validate().
Force validate specific fields sample
Just like the case below, there is a time when you need to force validate only specific fields. For example, the date comparison validates when both fields are invalid and we change one field to be valid the other field is still invalid so this case we can force validation of both fields to be validated but not all the fields to be user-friendly.
In any Vue component
<template>
<v-container>
<v-form v-model="valid">
<v-row class="text-center">
<v-col cols="4">
<v-menu v-model="showStartDate" min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field
ref="startDate"
label="Start date"
:value="startDate"
:rules="[
(v) => !!v || 'The field is required',
(v) =>
!endDate ||
v < endDate ||
'Start date must before end date',
]"
@click:clear="startDate = null"
v-on="on"
v-bind="attrs"
prepend-inner-icon="mdi-calendar-blank-outline"
clearable
>
</v-text-field>
</template>
<v-date-picker
v-model="startDate"
@change="showStartDate = false"
@input="forceValidateDate"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="4">
<v-menu v-model="showEndDate" min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field
ref="endDate"
label="End date"
:value="endDate"
:rules="[
(v) => !!v || 'The field is required',
(v) =>
!startDate ||
v > startDate ||
'End date must after start date',
]"
@click:clear="endDate = null"
v-on="on"
v-bind="attrs"
prepend-inner-icon="mdi-calendar-blank-outline"
clearable
>
</v-text-field>
</template>
<v-date-picker
v-model="endDate"
@change="showEndDate = false"
@input="forceValidateDate"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="4">
<v-text-field
label="Other field"
:value="otherField"
:rules="[(v) => !!v || 'The field is required']"
>
</v-text-field>
</v-col>
</v-row>
<v-btn :disabled="!valid">Submit</v-btn>
</v-form>
</v-container>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
startDate: null,
endDate: null,
showStartDate: null,
showEndDate: null,
otherField: null,
valid: false,
};
},
methods: {
forceValidateDate() {
this.$refs.startDate.validate();
this.$refs.endDate.validate();
},
},
};
</script>
