Search code examples
validationvuejs3vee-validate

VeeValidate 4: two forms on one page

I have a Vue component in a Vue component, and both of them contain one form each that I want to validate individually.

<form @submit="submitLogin">
  Input fields and button
</form>
<OtherComponent />

Where the other component has a similar form. It appears when I use handleSubmit the main component will try to handle all the input fields, and the handleSubmit in OtherComponent does not work at all.

const { handleSubmit } = useForm();

I also tried a workaround where I instead used validate, manually ran a validation on button clicks and checking meta valid to see if the form was valid.

const { validate, meta } = useForm()

The same thing happened here, since both components use validate useForm it messes up the OtherComponent's one. When I check the meta it says it's always valid even if it isn't. I have thought about putting them in the same component but don't see how that would make a difference.

Is there a way to achieve this or do I have to someone work around it?

Solution

  • I had the same problem, you can track this issue on vee-validate github:

    https://github.com/logaretm/vee-validate/issues/3204

    Currently, to avoid this bug you have to discharge a wrapper component for each of your form, like this:

    <ComponentWithForm />
<AnotherComponentWithForm />