BootstrapVue VeeValidate - show an extra error message when form is invalid

Question

I am using BootstrapVue and VeeValidate in my Laravel + Vue.js SPA (Single Page Appplication). When form fields are invalid, it automatically shows errors in respective posi

Answer 1

Grab the failed state from the ValidationObserver slot props:

<ValidationObserver ref="form" v-slot="{ failed, passes }">
  <div v-if="failed">Invalid Data</div>

<!-- rest of your fields -->
</ValidationObserver>