Vee-validate Validate on blur prevents form submit

Question

I am using vee-validate to validate a form in vue.js. The validation should be fired on blur. There is a submit button which validates all the fields in the form.

The issue is, when I click the submit button after typing some input, only the blur event is fired and the input field is validated. The submit event is not triggered. If I click the button again, the submit event is triggered.

<form v-on:submit.prevent="submit" autocomplete="off">
    <div>
      <div>{{ errors.first('carNumber') }}</div>
      <input v-model="carNumber" name="carNumber" v-validate="'numeric'"/>
      <button type="submit">Submit</button>
    </div>
</form>

Sample code link: https://jsfiddle.net/2u6n7xfr/35/

Steps to reproduce:

1. Type some invalid value in the input, ie: qwerty.
2. Click submit button. (Submit event is not fired.)
3. Type some valid value in the input, ie: 1234.
4. Click submit button. (Submit event is not fired.)

Answer 1

Replace

this.$validator.validate("*").then(function(valid) {

With:

this.$validator.validateAll().then(function(valid) {

See: https://jsfiddle.net/Ljo9uw1y/

--

The other problem you mentioned is related to physically clicking on the button: I think your problem is that the submit button "moves" when you click it, so the event is not triggered. For example, moving the error bellow the submit button causes the click to work: jsfiddle.net/5goe4vcf

One fix for this is to shrink the error message so that it doesn't cause a large bubble downwards, as well as make the submit button larger so that it doesn't exit the scope of the mouse pointer during the click.