Vuelidate: validate on click, not when field touched

Question

I'm kinda new to vuelidate, and everything works fine, except I have no clue how to run validation only when the button Submit has been clicked. Right now it marks touched field red when you start providing any input and I'd like it to wait with that, till user wants to submit filled form.

Here's what I've got up to now:

Answer 1

I could never really get used to the Vuelidate way of doing things, but, generally speaking, it works like this: https://monterail.github.io/vuelidate/#sub-basic-form

Setting it up like this allows you to have validation for each form input/element and then an overall check to see if the form is "dirty" and/or "invalid"

form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
  "required": {
    "type": "required"
  }
}
},
"Age": {
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": {
    "required": {
      "type": "required"
    }
  }
},
"$invalid": true,  <------- This is what you are after for valid/invalid
"$dirty": false,   <------- This is what you are after to see if the form has been used.
"$error": false,  <-------  This checks both invalid and dirty
"$pending": false,
"$params": {
   "nestedA": null,
   "nestedB": null
}
}

As far as using this in practice, one option would be to call validateform event on submit.

@click.prevent="validateform"

Then create a validateform method in your vue instance that checks

$v.form.$invalid  or $v.form.$error

then either display errors or call the actual submit method