I have array of field, I don't want the validation to trigger until and unless user touches the field.
I have tried validateOnMount: false but this still does not work.
<template>
<form @submit="onSubmit" novalidate>
<div v-for="(field, idx) in fields" :key="field.key">
<input v-model="field.value" type="url" />
<span>{{ errors }}</span>
<button type="button" @click="remove(idx)">Remove</button>
</div>
<button type="button" @click="push('')">Add</button>
<button>Submit</button>
</form>
</template>
<script setup>
import { useForm, useFieldArray } from 'vee-validate';
import * as yup from 'yup';
const { handleSubmit, errors } = useForm({
validationSchema: yup.object({
links: yup.array().of(yup.string().required()),
}),
initialValues: {
links: [''],
},
validateOnMount: false,
});
const { remove, push, fields } = useFieldArray('links');
const onSubmit = handleSubmit((values) => {
console.log(JSON.stringify(values, null, 2));
});
</script>
