Modal is closing after submit form even if I have errors Vuejs

Question

I created a validation with vuelidate but after I submit the form modal is closing even if I have errors. I am using Bootstrap-Vue with VueJs. I want that the model to be open if I get an error after submit.

<b-modal
    v-bind="$attrs"
    title="Add new customer"
    @ok="addCustomer"
>

<form ref="form" @submit.stop.prevent>
    <b-form-group label="Account Name" label-for="account_name-input">
        <b-form-input
                id="account_name-input"
                v-model="account_name"
                v-model.trim="$v.account_name.$model"
                :class="{
'is-invalid':$v.account_name.$error, 'is-valid':!$v.account_name.$invalid}"
        ></b-form-input>
        <div class="invalid-feedback">
            <span v-if="!$v.account_name.required">This field is required!</span>
        </div>
    </b-form-group>
</form>

addCustomer() {
    if (this.$v.$invalid) {
        console.log('Error');
    }else{
        console.log("Succes");
        let newCustomer = {
            account_name: this.account_name,
        };

        ...code...
    }
},

validations: {
    account_name: {
        required
    },
}

Answer 1

I read the documentation again and I found a solution for this. I add this bvModalEvt.preventDefault()

addCustomer(bvModalEvt) {
    if (this.$v.$invalid) {
        bvModalEvt.preventDefault()
        console.log('Error');
    }else{
...code...