2022-08-19

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


No comments:

Post a Comment