How to validate data only after button click?

Asked By: Anonymous

I need to validate inputs only after a submit button is clicked. However, the required rule is activating after focus lost. I’m using VeeValidate in Vue.js.

HTML:

<input 
  name="Email" 
  v-validate 
  data-vv-rules="required|email" 
  id="email" 
  type="email" 
  v-model="email" 
  placeholder="Email " 
>

JS:

this.$validator.validateAll().then(success => {

})

Solution

Answered By: Anonymous

You can use data-vv-validate-on to disable the default validation behavior like so: data-vv-validate-on="none"

Then add a click event handler to your submit button a @click="submit".

And the submit method for your component would look something like this:

methods: {
  submit() {
    this.$validator.validateAll().then(success => {
      // submit the value
    })
  }
}