How to Handle Custom Validation on Conditional Fields in Vue 3 with VeeValidate?
I recently switched to I'm working on a Vue 3 application using VeeValidate for form handling, and I'm working with an scenario with custom validation on conditionally displayed fields. I have a form where users can choose between 'Option A' and 'Option B'. If they select 'Option A', I need to display a set of additional fields that require validation. The question arises when I try to validate these fields based on the user's selection. When 'Option A' is selected, I want the additional fields to be required, but if 'Option B' is selected, they should not be validated. I set up my form like this: ```vue <template> <form @submit.prevent="submitForm"> <select v-model="selectedOption"> <option value="A">Option A</option> <option value="B">Option B</option> </select> <div v-if="selectedOption === 'A'"> <input v-model="extraField1" v-validate="{ required: true }" name="extraField1" /> <span>{{ errors.extraField1 }}</span> <input v-model="extraField2" v-validate="{ required: true }" name="extraField2" /> <span>{{ errors.extraField2 }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { useForm } from 'vee-validate'; export default { setup() { const { handleSubmit, errors, resetForm } = useForm(); const selectedOption = ref('A'); const extraField1 = ref(''); const extraField2 = ref(''); const submitForm = handleSubmit((values) => { console.log(values); }); return { selectedOption, extraField1, extraField2, submitForm, errors }; } }; </script> ``` When I run the form, I notice that if I switch from 'Option A' to 'Option B' after filling the extra fields, I still receive validation errors for those fields, which should not be required anymore. This results in the following behavior message being displayed: ``` The extraField1 field is required. ``` I've tried using `resetForm()` to clear the fields when the selection changes, but that doesn’t seem to clear the validation state. I've also explored using `setFieldValue()` to manage the required state dynamically, but I'm not sure how to implement that properly. Does anyone have a solution for dynamically managing field validation in VeeValidate based on other field selections? This issue appeared after updating to Javascript 3.11. I'd be grateful for any help. I'm developing on Ubuntu 22.04 with Javascript. I'm open to any suggestions.