Hola, necesito validar varias entradas antes de permitir que el usuario envíe:
<button type="submit" v-on:click="validateErrors()" @click.prevent="submit">Finalizar</button> Hice un método validateErrors para manejar todas las validaciones por separado:
validateErrors() { if (this.campaign.selectedBox == null) { this.$set(this.msg, 'selectedbox', 'Alert 1') ; return true; } if (this.campaign.selectedExtras == null) { this.$set(this.msg, 'selectedextras', 'Alert 2') ; return true; } },Por último, hice una alerta con los diferentes mensajes para mostrar en caso de que una (o varias) de las entradas no validen:
<div class="alert alert-info w-100" v-if="msg.selectedbox">{{msg.selectedbox}}</div> <div class="alert alert-info w-100" v-if="msg.selectedextras">{{msg.selectedextras}}</div>Solo funciona la primera de las validaciones, ¿cómo puedo manejar múltiples validaciones con sus propias alertas ejecutadas por la misma función al enviar?
¡Muchas gracias!
En lugar de crear esta función, puede agregar reglas para la entrada y luego usar el validador de formularios en vuejs https://v2.vuejs.org/v2/cookbook/form-validation.html Pero si desea seguir usando esta función, puede hacerlo este
function validateErrors() { var check1 = false; var check2 = false; if (this.campaign.selectedBox == null) { this.$set(this.msg, "selectedbox", "Alert 1"); check1 = true; } if (this.campaign.selectedExtras == null) { this.$set(this.msg, "selectedextras", "Alert 2"); check2 = true; } return {check1:check1, check2:check2}; }