How can I prevent from calling onClick event on button if some input is not valid (using vee-validate ValidationObserver). I need this on button not on the form because I have multiple buttons (calling different methods or using different parameters) that should be executed only if data are valid.
Snippet for better understanding:
<validation-observer ref="myValidator">
<form>
<validation-provider rules="required" v-slot="{ errors }">
<input type=”text”>
</validation-provider>
<validation-provider rules="required" v-slot="{ errors }">
<input type=”text”>
</validation-provider>
<button onClick=”if inputs are valid call method1”>
<button onClick=”if inputs are valid call method2”>
</form>
</validation-observer>
Is there “built-in” or better solution than testing an ValidationObserver in code (like this.$refs.resCodesValidator.validate()) inside onClick methods?
Yes. https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
<form>
<label for="fname"> name (required)</label>
<input id="fname" name="fname" required>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
<button>Submit</button>
</form>