Vuetify – Rules should return a string or boolean, received ‘undefined’ instead

Total
26
Shares

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_

Leave a Reply

Your email address will not be published. Required fields are marked *