I have integrated Vue.js 2 and VeeValidate3 to validate my form. In addition, the form makes an axios call to verify if the username is already in use. If it is, the validation should be set to false.

Everything seems to be working fine so far. I am able to see the error message

Dieser Name wird bereits verwendet

when I enter a username that is already taken.

However, I noticed that if I proceed to click the submit button despite seeing the error message, the error message disappears and instead, I see the message

Submit submitCompleteNormalRegistrationForm

indicating that the form was successfully submitted.

This raises the question as to why the form gets submitted even with a validation error regarding the name. What mistake am I making?

Furthermore, how can I ensure that the validation for the name is set to true when the name is not already in use?

Below is the code I currently have:

<template>
    <div>
        <ValidationObserver ref="completeNormalRegistrationForm" v-slot="{ passes }" class="flex-column flex-grow-1 d-flex w-100">
            <form @submit.prevent="passes(submitCompleteNormalRegistrationForm)" id="completeNormalRegistrationForm" class="flex-column flex-grow-1 d-flex w-100">
                <div class="backButtonWrapper text-left">
                    <i id="backButtonRegistrationForm" @click="showLoginForm" class="far fa-arrow-alt-circle-left"></i>
                </div>
                <div class="form-wrapper margin-auto w-100">
                    <p class="rubik-bold" style="font-size: 1rem;">Registrieren</p>
                    <ValidationProvider vid="name" name="Nutzername" rules="required|alpha_dash" v-slot="{ errors }">
                        <input @keyup="completeNormalRegistrationFormUsernameExists" class="form-control search-username" v-model="registerForm.name" type="text" placeholder="Username">
                        <span v-if="errors[0]" class="username-invalid-span">{{ errors[0] }}</span>
                    </ValidationProvider>
                    <ValidationProvider vid="email" name="E-Mail" rules="required|email" v-slot="{ errors }">
                        <input class="form-control search-email" v-model="registerForm.email" type="email" placeholder="E-Mail">
                        <span v-if="errors[0]" class="email-invalid-span">{{ errors[0] }}</span>
                    </ValidationProvider>
                    <ValidationProvider vid="confirmation" name="Passwort" v-slot="{ errors }">
                        <input class="form-control" v-model="registerForm.password" type="password" placeholder="Passwort">
                        <span v-if="errors[0]" class="password-invalid-span">{{ errors[0] }}</span>
                    </ValidationProvider>
                    <ValidationProvider rules="confirmed:confirmation" name="Passwort" v-slot="{ errors }">
                        <input class="form-control" v-model="registerForm.passwordConfirmation" type="password" placeholder="Passwort wiederholen">
                        <span v-if="errors[0]" class="password-invalid-span">{{ errors[0] }}</span>
                    </ValidationProvider>

                    <button type="submit" class="btn btn-primary btn-big big-letter-spacing text-uppercase rubik-bold login">Anmelden</button>
                </div>
            </form>
        </ValidationObserver>
    </div>
</template>

<script>
    export default {
        name: "NavbarAction",
        data() {
            return {
                registerForm: {
                    name: '',
                    email: '',
                    password: '',
                    passwordConfirmation: '',
                    termsAndConditions: false,
                },
            }
        },
        methods: {
            async completeNormalRegistrationFormUsernameExists() {
                const nameValid = await this.usernameExists(this.registerForm.name);

                if (nameValid) {
                    this.$refs.completeNormalRegistrationForm.setErrors({name: 'Dieser Name wird bereits verwendet'});
                } else {
                    console.log('Set name is NOT in use!');
                }
            },
            async usernameExists(name){
                return await axios.post(window.routes.usernameExists, {value: name})
                    .then(r => {
                        return r.data;
                    });
            },
            submitCompleteNormalRegistrationForm(){
                console.log('Submit submitCompleteNormalRegistrationForm');
                console.log(this);
            }
        }
    }
</script>

UPDATE (now utilizing custom rule):

extend('unique-email', (value) => {
    return axios.post(this.routes.emailExists, { value: value })
        .then((r) => {

            // If email exists, axios response is true
            if(r.data){
                return {
                    valid: false,
                    data: { message: 'E-Mail wird bereits genutzt' }
                };
            }else{
                return {
                    valid: true,
                };
            }
        }, (err) => {
            return {
                valid: false,
                data: { message: 'E-Mail wird bereits genutzt' }
            };
        })
    },
)