Hello all, I am currently working on a Vue 3 project and utilizing vee-validate v4 for form validation. My forms are structured as follows
<template>
<div>
<VForm
v-slot="{ meta }"
ref="form"
>
<VField
v-slot="{ field, errors: nameErrors }"
name="name"
rules="required|min:6"
>
<va-input
v-bind="field"
v-model="account.data.name"
class="mb-4"
:label="$t('register.name')"
:error="nameErrors && nameErrors.length > 0"
:error-messages="nameErrors"
/>
</VField>
</VForm>
</div>
</template>
I am using the new script setup and my code looks like this
<script lang="ts" setup>
import { useForm } from "vee-validate";
const form = useForm();
const save = async function() {
const validate = await form.validate() as any;
if (validate.valid) {
// My save logic
}
}
</script>
However, the validate.valid property always returns true, even when there are validation errors in the form. Is there a way to resolve this issue? I tried using validation schema, which did work, but it required additional code to display errors on fields or duplicating the rules within the schema. Is there a way to utilize form.validate() with the rules defined in the individual fields?