¿Cómo puedo evitar llamar al evento onClick en el botón si alguna entrada no es válida (usando vee-validate ValidationObserver)? Necesito esto en el botón, no en el formulario porque tengo varios botones (que llaman a diferentes métodos o usan diferentes parámetros) que deben ejecutarse solo si los datos son válidos.
Fragmento para una mejor comprensión:
<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> ¿Existe una solución "incorporada" o mejor que probar un ValidationObserver en el código (como this.$refs.resCodesValidator.validate() ) dentro de los métodos onClick?
Sí. 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>