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 => {

})

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 => {

})

• javascript
• vue.js

Share Improve this question Follow edited Mar 22, 2017 at 14:47 thanksd 55.7k2323 gold badges165165 silver badges154154 bronze badges asked Mar 22, 2017 at 13:20 MAXIMANMAXIMAN 16522 silver badges1414 bronze badges 2

• could you post ur full js function .. – Abhinav Commented Mar 22, 2017 at 13:23
• From a UX standpoint, instant feedback after losing focus gives the form a nice interactive feel to it. This isn't the most helpful for the question but it's useful to be said. – Patrick Barr Commented Mar 22, 2017 at 13:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 ponent would look something like this:

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

If your version of vee-validate < 4, this might help