Vue.js BootstrapVue : Veevalidate cannot validate datepicker

问题

In my Laravel+Vue.js SPA ( Single Page Application) I am using the datepicker package from here, BootstrapVue from here and Veevalidate from here .

I think I need to show only the code inside my component file as only the datepicker component causes the problem and not other ones. My code follows in EditProfile.vue:

<ValidationObserver ref="form" v-slot="{ passes }">

        <div id="registration_form">

            <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">

                <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
                    <b-form-group
                            label="User Name:"
                            label-for="exampleInput1"

                    >
                        <b-form-input
                                type="text"
                                v-model="name"
                                :state="errors[0] ? false : (valid ? true : null)"
                                placeholder="Enter your name"
                        ></b-form-input>

                        <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

                    </b-form-group>

                </ValidationProvider>


                <ValidationProvider vid="dob" rules="required" name="dob" v-slot="{ valid, errors }">
                    <b-form-group
                            label="Date of Birth:"
                            label-for="exampleInput1"
                            >

                              <datepicker
                                    type="text"
                                    v-model="dob"
                                    required
                                    format="d-M-yyyy"
                                    :state="errors[0] ? false : (valid ? true : null)"
                                    >
                              </datepicker>

                        <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

                    </b-form-group>

                </ValidationProvider>



                <b-button type="submit" variant="primary">Submit</b-button>
                <b-button type="reset" variant="danger">Reset</b-button>

            </b-form>

        </div><!-- end of id registration_form-->
    </ValidationObserver>

JS part inside EditProfile.vue is:

import Datepicker from 'vuejs-datepicker';
import { ValidationObserver, ValidationProvider } from "vee-validate";

export default {
    name: "EditProfile",
    components: {
        ValidationObserver,
        ValidationProvider,
        Datepicker
            },
    data: () => ({
        name: "",
        dob:""
    }),
    methods: {

       onSubmit() {
            console.log("Form submitted yay!");
                  },

        resetForm() {
            this.name = "";
            this.dob = "";
            requestAnimationFrame(() => {
                this.$refs.form.reset();
            });
        }

}
};

When the submit button is pressed then validation works for name field but no error message shows up when dob field on datepicker is empty .

My Vue.js version is 2.6.10 and I used the latest versions of BootstrapVue and Veevalidate (3) as well.

How can I make the validation work for the date picker as well ?

来源：https://stackoverflow.com/questions/59444033/vue-js-bootstrapvue-veevalidate-cannot-validate-datepicker

标签

Vue.js