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



  • 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



  • @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.



  • 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?



  • @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.


Log in to reply