Greetings! I have a requirement to check and validate multiple inputs before allowing the user to submit:
<button type="submit" v-on:click="validateErrors()" @click.prevent="submit">Finalize</button>
I have created a method validateErrors to handle individual validations:
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;
}
},
Additionally, I have set up alerts to display respective messages if any of the inputs fail the validation:
<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>
However, I am facing an issue where only the first validation is functioning. How can I handle multiple validations with their own alerts triggered by the same function at submit?
Thank you for your assistance!