I have a form with datepicker, the validation is working as intended but I keep getting an error message in the browser’s console, “Rules should return a string or boolean, received ‘undefined’ instead” I just want to get rid of it, but I’m not sure where and at what moment the rule it is returning undefined.
Also the “future” rule is always returning false for some reason
<template>
<div>
<v-container>
<v-card>
<div class="container">
<v-form ref="form" v-model="isValid">
<v-row>
<v-col cols="12" sm="12" md="6">
<v-menu ref="menu" v-model="menu" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="route.departure" label="Departure" color="black" readonly v-on="on" :rules="[rules.required, rules.future]"></v-text-field>
</template>
<v-date-picker v-model="route.departure" no-title scrollable color="amber lighten-2">
<v-spacer></v-spacer>
<v-btn color="red accent-3" class="black-text" @click="menu = false">Cancel</v-btn>
<v-btn color="yellow" class="black-text" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-menu ref="menu_2" v-model="menu_2" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="route.arrival" label="Arrival" color="black" :rules="[rules.required, rules.today, rules.future]" readonly v-on="on"></v-text-field>
</template>
<v-date-picker v-model="route.arrival" no-title scrollable color="amber lighten-2">
<v-spacer></v-spacer>
<v-btn color="red accent-3" class="black-text" @click="menu_2 = false">Cancel</v-btn>
<v-btn color="yellow" class="black-text" @click="$refs.menu_2.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</v-form>
</div>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
isValid: true,
date: new Date().toISOString().substr(0, 10),
menu: false,
menu_2: false,
route: {
departure: '',
arrival: '',
},
rules: {
required: value => !!value || 'Required.',
arrival: value => {
return (new Date(this.route.departure) < new Date(this.route.arrival) || 'Arrival date must be after the Departure date');
},
future: value => {
return (new Date() <= new Date(this.route.departure) && (new Date() <= new Date(this.route.arrival))) || "Date must be today's date or after"
}
}
}
},
}
</script>
Solution
The issue comes from :rules="[rules.required, rules.today, rules.future]" since today rule is undefined and modify future and arrival by adding the value as parameter of the date constructor :
_x000D_
_x000D_
new Vue({_x000D_
el: '#app',_x000D_
vuetify: new Vuetify(),_x000D_
data() {_x000D_
return {_x000D_
isValid: true,_x000D_
date: new Date().toISOString().substr(0, 10),_x000D_
menu: false,_x000D_
menu_2: false,_x000D_
route: {_x000D_
departure: new Date().toISOString().substr(0, 10),_x000D_
arrival: new Date().toISOString().substr(0, 10),_x000D_
},_x000D_
_x000D_
_x000D_
_x000D_
rules: {_x000D_
required: value => !!value || 'Required.',_x000D_
arrival: value => {_x000D_
return (new Date(value) < new Date(this.route.arrival) || 'Arrival date must be after the Departure date');_x000D_
},_x000D_
future: value => {_x000D_
return (new Date() <= new Date(this.route.departure) && (new Date() <= new Date(value))) || "Date must be today's date or after"_x000D_
}_x000D_
_x000D_
}_x000D_
}_x000D_
},_x000D_
_x000D_
_x000D_
_x000D_
})_x000D_
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">_x000D_
_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>_x000D_
_x000D_
<div id="app">_x000D_
<v-app>_x000D_
<v-content>_x000D_
<v-container>_x000D_
<v-card>_x000D_
<div class="container">_x000D_
<v-form ref="form" v-model="isValid">_x000D_
<v-row>_x000D_
<v-col cols="12" sm="12" md="6">_x000D_
<v-menu ref="menu" v-model="menu" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">_x000D_
<template v-slot:activator="{ on }">_x000D_
<v-text-field v-model="route.departure" label="Departure" color="black" readonly v-on="on" :rules="[rules.required, rules.future]"></v-text-field>_x000D_
</template>_x000D_
<v-date-picker v-model="route.departure" no-title scrollable color="amber lighten-2">_x000D_
<v-spacer></v-spacer>_x000D_
<v-btn color="red accent-3" class="black-text" @click="menu = false">Cancel</v-btn>_x000D_
<v-btn color="yellow" class="black-text" @click="$refs.menu.save(date)">OK</v-btn>_x000D_
</v-date-picker>_x000D_
</v-menu>_x000D_
</v-col>_x000D_
_x000D_
<v-col cols="12" sm="12" md="6">_x000D_
<v-menu ref="menu_2" v-model="menu_2" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">_x000D_
<template v-slot:activator="{ on }">_x000D_
<v-text-field v-model="route.arrival" label="Arrival" color="black" :rules="[rules.required, rules.future]" readonly v-on="on"></v-text-field>_x000D_
</template>_x000D_
<v-date-picker v-model="route.arrival" no-title scrollable color="amber lighten-2">_x000D_
<v-spacer></v-spacer>_x000D_
<v-btn color="red accent-3" class="black-text" @click="menu_2 = false">Cancel</v-btn>_x000D_
<v-btn color="yellow" class="black-text" @click="$refs.menu_2.save(date)">OK</v-btn>_x000D_
</v-date-picker>_x000D_
</v-menu>_x000D_
</v-col>_x000D_
</v-row>_x000D_
</v-form>_x000D_
</div>_x000D_
_x000D_
</v-card>_x000D_
</v-container>_x000D_
</v-content>_x000D_
</v-app>_x000D_
</div>_x000D_
_x000D_
_x000D_
