Is there a way to prevent Vue rules from validating before a user interacts with an element?
I'm using a v-date-picker
in a project I'm building where a user selects a departure date and a return date. Most of my other rules on the input fields don't validate until the user interacts with them, but the departure date picker shows "Please select a date" on page load, and the return date picker doesn't show any errors at all, regardless of what date I select.
The date picker code:
<v-row>
<v-col cols="auto" sm="6">
<v-menu v-model="departPicker" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto" >
<template v-slot:activator="{ on, attrs }">
<v-card-text style="padding: 0px;">Departure Date</v-card-text>
<v-text-field dense outlined readonly v-bind="attrs" v-on="on" v-model="genInfoObject.departureDate" :rules="departureDateRules"/>
</template>
<v-date-picker v-model="genInfoObject.departureDate"/>
</v-menu>
</v-col>
<v-col cols="auto" sm="6">
<v-menu v-model="returnPicker" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-card-text style="padding: 0px;">Return Date</v-card-text>
<v-text-field dense outlined readonly v-bind="attrs" v-on="on" v-model="genInfoObject.returnDate" :rules="returnDateRules"/>
</template>
<v-date-picker v-model="genInfoObject.returnDate" />
</v-menu>
</v-col>
</v-row>
The rules code:
departureDateRules: [
v => !!v || 'Departure date is required',
v => v >= new Date().toISOString().slice(0, 10) || "Departure date can't be prior to today's date"
],
returnDateRules: [
v => !!v || 'Return date is required',
v => v >= new Date().toISOString().slice(0, 10) || "Return date can't be prior to today's date",
v => v <= this.genInfoObject.departureDate || "Return date can't be before departure date",
],
departPicker: false,
returnPicker: false
Comments
Post a Comment