Vuelidate: validate on click, not when field touched

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

Then the only thing you have to do after setting up the validations is to call a method that will validate the errors. So follow below:

<button @click="validate">Submit</button>

The method:

validate () {  this.$v.$touch() //it will validate all fields  if (!this.$v.$invalid) { //invalid, becomes true when a validations return false   //you dont have validation error.So do what u want to do here  }}

Here is what I do with VeeValidate 3:

<validation-observer ref="jobValidation"> <form>     <button v-on:click="nextPage()" type="button">Next</button> </form></validation-observer>

and within methods:

nextPage(): void {                     const validation = (this.$refs.jobValidation as any);    validation.validate().then(() => {                     if (validation.flags.invalid) {                                   // No no no no        // bonus: show all errors in summary        validation.$children.forEach((child: any) => {           child.errors.forEach((error: any) => {              console.log(error);           });           return;        });    } else {        // Yes yes yes    }    });  },