Currently, I have implemented vee-validate to validate a form in vue.js. The validation is set to trigger on blur, and there is also a submit button that should validate all fields in the form upon clicking.
The problem arises when I click the submit button after entering some input - only the blur event gets fired to validate the input field. The submit event, however, fails to trigger at first attempt. It's only after clicking the button again that the submit event finally kicks in.
<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>
For reference, you can check out the sample code here: https://jsfiddle.net/2u6n7xfr/35/
To reproduce the issue, follow these steps:
- Enter an invalid value in the input field, for example: qwerty.
- Click the submit button (Note that the Submit event does not get triggered).
- Now input a valid value, such as: 1234.
- Click the submit button once more (Again, the Submit event fails to fire).