Vue.js: Prevent form submit only if condition true

Question

I am using VeeValidate for validating a form. However, I want to submit the form without using JS. However, I still want users not to be able to submit, if there are any errors. If I use

<form @submit.prevent="validateBeforeSubmit">

it is disabling the default action completely.

Can you think of any solution to this? Thank you!

Answer 1

I'm not familiar with VeeValidate, but why not try something like this:

<form @submit="validateBeforeSubmit">

validateBeforeSubmit(e) {
  if (this.errors.any()) {
    // Prevent the form from submitting
    e.preventDefault();
  }
}