form submit method is not working with vuelidate

Question

Quick questions. I have a form with vuelidate, When the form is submitted improperly the validations works perfectly. but when all the validations are passed(all the fields are filled correctly) I don't get any response from the form(I did console log to present some message)

Submit btn:

<input type="submit" class="formBtn">

Submit method:

submitForm () {
  this.$v.$touch();

  if (!this.$v.$invalid){
    console.log('Submitted');
  }
},

Form configured like this:

<form @submit.prevent="submitForm">

If the validations are not correct, error spans are appearing correctly, but if all the fields are correct, nothing happens when I press the submit btn.

Answer 1

I see you are not using v-model to bind the data two ways as described in the documents https://v2.vuejs.org/v2/guide/forms.html if that's the case I think you might wanna try this simple example from official document https://vuelidate-next.netlify.app/examples.html

it goes like this:

<template>
  <input type="text" :value="name" @input="setName">
</template>

<script>
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

export default {
  setup: () => ({ v$: useVuelidate() }),
  data: () => ({ name: '' }),
  validations () {
    return {
      name: { required }
    }
  },
  methods: {
    setName ($event) {
      // do some silly transformation
      this.name = $event.target.value.toUpperCase()
      this.v$.name.$touch()
    }
  }
}
</script>

"In case you don't want to modify your model directly, you can still use separate :input and @event bindings."