How can I ensure that the onClick event on a button is only called if certain input fields are valid, using vee-validate ValidationObserver? The validation should apply to individual buttons within a form, rather than the entire form itself, as there are multiple buttons with different functionalities. These buttons should only be triggered if the data entered in the respective input fields are valid.
Here's a snippet for a clearer demonstration:
<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=”call method1 if inputs are valid”>
<button onClick=”call method2 if inputs are valid”>
</form>
</validation-observer>
Is there a more efficient solution, perhaps a built-in feature, instead of manually checking the ValidationObserver status within onClick methods like
this.$refs.resCodesValidator.validate()