I am encountering an issue with form validation in which all fields are validating upon clicking the "Submit" button except for a custom field. Here is the structure of my form:
<template>
<Form v-slot="{ validate }" :validation-schema="simpleSchema">
First name:
<div>
<Field v-slot="{ field, meta }" name="firstName">
<input v-bind="field" type="text" />
{{ meta.validated }}
{{ meta.valid }}
</Field>
<ErrorMessage name="firstName" />
</div>
Last name:
<div>
<Field v-slot="{ field, meta }" name="lastName">
<input v-bind="field" type="text" />
{{ meta.validated }}
{{ meta.valid }}
</Field>
<ErrorMessage name="lastName" />
</div>
Item:
<div>
<InputText name="item" />
<ErrorMessage name="item" />
</div>
<div>
<button @click="validate">Submit</button>
</div>
</Form>
</template>
<script setup>
import { Form, Field, ErrorMessage, configure } from 'vee-validate';
import * as yup from 'yup';
import InputText from './InputText.vue';
configure({
validateOnBlur: false,
validateOnChange: false,
});
const simpleSchema = {
firstName: yup.string().required(),
lastName: yup.string().required(),
item: yup.string().required(),
};
</script>
Within this setup, I also have a custom field structured like this:
<template>
<input v-model="value" type="text" />
{{ meta.validated }}
{{ meta.valid }}
</template>
<script setup>
import { useField } from 'vee-validate';
const props = defineProps({
name: String,
});
const { value, meta } = useField(props.name);
</script>
If you want to see an example, you can check out this link.
Currently, the custom field Item is evaluating immediately upon entry rather than waiting for the "Submit" button click. How can I adjust this so that Item only validates when the "Submit" button is clicked?