How to create a non-blocking Vuelidate custom validator

24 Views Asked by At

I am currently facing an issue using Vuelidate. I'd like to create a custom validator, that performs a check but doesn't trigger the $validate / $touch method to be false when it fails.

I have a basic form component

<template>
    <div>
        <InputCommon
            id="client-name"
            :label="$t('client.form.name')"
            required
            v-model="store.form.client.name"
            :error="v$.name.$errors[0]"
        />
        <InputCommon
            id="client-email"
            :label="$t('client.form.email')"
            v-model="store.form.client.email"
            :error="v$.email.$errors[0]"
        />
    </div>
</template>

<script setup lang="ts">
import InputCommon from "@/components/common/inputs/InputCommon.vue";
import { useStore } from "@/store/store";
import { onMounted } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { computed } from "vue";
import { required, email } from "@vuelidate/validators";

const rules = computed(() => {
    return {
        name: { required },
        email: { email } // Adding a custom validator here to check but not return false for validate()
    };
});

const store = useStore();
const v$ = useVuelidate(rules, store.form.client);

// If validate return false, form will not allow to go further
async function validate() {
    let validation = await v$.value.$validate();
    return validation;
}

function reset() {
    v$.value.$reset();
}

onMounted(() => {
    if (!store.form.client) {
        store.form.client = {
            name: "",
            email: "",
        };
    } else {
        validate();
    }
});

defineExpose({ validate, reset });
</script>

With this example, I'd like my function validate to not return false if the email is missing, but i'd like to still register its error in the v$.email.$errors array.

My first attempt was to manually check it in the validate function and manually push an ErrorObject into the error array, but this seems to be pretty bad and not flexible at all.

0

There are 0 best solutions below