Hi there, I need to validate several inputs before letting the user submit:
<button type="submit" v-on:click="validateErrors()" @click.prevent="submit">Finalizar</button>
I did a method validateErrors in order to handle all of the validations separately:
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;
}
},
Lastly, I made an alert with the different messages to show in case one (or various) of the inputs don't validate:
<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>
Only the first of the validations is working, how can I handle multiple validations with their own alerts being executed by the same function on submit?
Thanks a lot!
Instead of creating this function you can add rules for the input and then use form validator in vuejs https://v2.vuejs.org/v2/cookbook/form-validation.html But if you want to stay using this function you can do this
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};
}