Vuelidate: validate on click, not when field touched
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
}
}
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