QForm not submitting when the Vee-validation ValidationProvider is used on q-input

[JiProchzaka]

Hi,
I have a form:

<q-form @submit="onSubmit">
  <ValidationProvider
    rules="required"
    v-slot="{ errors, invalid, validated }"
    slim
  >
    <q-input
      filled
      clearable
      v-model="login"
      type="login"
      label="Login"
      :error="invalid && validated"
      :error-message="errors[0]"
    />
  </ValidationProvider>
  <q-btn
    type="submit"
    color="primary"
    class="full-width"
    label="Login"
  />
</q-form>

And the method:

methods: {
  onSubmit() {
    console.log("submitting");
  }
}

And the method onSubmit is never called. If I delete <ValidationProvider> (and :error and :error-message on the field) it is working.
Why? How I’m supposed to be using Vee-validate then?

Thanks

[metalsadman]

@JiProchzaka because qform can’t find the form inputs since you wrapped it inside your provider, you probably need to find a different solution one that doesn’t use their wrapper, since qform doesn’t detect form components any deeper. It was possible in previous vee validate version so I think it should be doable, just check their API for other possible route.

[JiProchzaka]

Ok, makes sense. What do you use for validation? Vuelidate?

I was starting with “pure functions” validation, but I want to validate form with one method call as stated here https://quasar.dev/vue-components/form#Usage which is a problem when I have some fields in child components. There is no easy solution for that, right?

[metalsadman]

@JiProchzaka yep most of the time I use vuelidate or just rules props. Well you can extend or make a wrapper of qform, check the source and tweak the implementation logic of iterating thru form components.

[marlonfsolis]

When using Vee-Validate you need to wrap the form with ValidationObserver and call your onSubmit method with the slot prop handleSubmit.
Your code would look like
<ValidationObserver v-slot="{handleSubmit}">
<q-form @submit.stop=“handleSubmit(onSubmit)”>
<!-- Your form items here -->
</q-form>
</ValidationObserver>