CODEWITHSUNDEEP
typescriptvue.jsvuejs3vee-validate
Alexandre Heinen
Alexandre Heinen

Reputation: 703

Vee-validate returning form is always valid when using <Field>

everyone. I'm working in a Vue 3 project and using vee-validate v4. I have my forms like this

<template>
  <div>
    <VForm
      v-slot="{ meta }"
      ref="form"
    >
      <VField
        v-slot="{ field, errors: nameErrors }"
        name="name"
        rules="required|min:6"
      >
        <va-input
          v-bind="field"
          v-model="account.data.name"
          class="mb-4"
          :label="$t('register.name')"
          :error="nameErrors && nameErrors.length > 0"
          :error-messages="nameErrors"
        />
      </VField>
    </VForm>
  </div>
</template>

I using the new script setup and my code is like this

<script lang="ts" setup>
  import { useForm } from "vee-validate";
  const form = useForm();
  const save = async function() {
    const validate = await form.validate() as any;
    if (validate.valid) {
      // My save logic
    }
  }
</script>

But the validate.valid is always true, even the form has validation errors. There is a way to correct this? I do a test with validation schema, and this works, but need some more code to show the errors on fields, or I need to duplicate the rules from into the schema. There is a way to use form.validate() with the rules in the fields?

Upvotes: 0

Views: 2579

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

You should NOT use useForm Composition API and <Form> component at the same time. Either use one or another. This way you are creating two different form contexts at the same time

Your form created by useForm() is always valid because it has no fields.

What you want is to use form context created by <VForm> component. Just replace const form = useForm(); with const form = ref()

Or use a well described way of form submit in the docs - no need for template refs or calling validate() manually as Vee-Validate will call your submit handler only if form is valid...

Upvotes: 1

Related Questions