VeeValidate does not validate datepicker when used with BootstrapVue

[ghuser123]

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

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:

<Validation Observer 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 ?

[stephendeo]

For what its worth, seeing that this issue has been here since last year. I've had the same issue. Here's how you set up the markup so that datepicker validates using vee-validate

<ValidationObserver tag="div" ref="observer" v-slot="{ passes }">
    <ValidationProvider rules="required" v-slot="{ classes, errors }">
        <b-form v-on:submit.prevent="passes(onSubmit)" novalidate>
            <b-form-group description class="group" :class="classes">
                <v-datepicker v-model="planData.brokerOfRecordAsOf" :typeable="true" name="datepicker" input-class="form-control" required>
                    <label slot="afterDateInput">Broker Record as of</label>                                                
                    <i slot="afterDateInput" class="fas fa-calendar-alt"></i>
                    <b-form-invalid-feedback slot="afterDateInput">{{ errors[0] }}</b-form-invalid-feedback>
                </v-datepicker>
            </b-form-group>
        </form>
    </ValidationProvider>
</ValidationObserver>

notice where I'm using the "classes" property. The classes to be applied depending on the state of the input.