vee-validate validateOnMount: false does not work

32 views Asked by At

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>

enter image description here

0

There are 0 answers