I have implemented vuelidate for form validation. My goal is to validate user input either when they move to the next input field or click outside of the current one.
<div class="form-group col-md-6" :class="{invalid: $v.partner.email.$error}">
<label for="EmailAddress" class="control-label">Email Address</label>
<input class="form-control" v-model="$v.partner.email.$model" @blur.native="$v.partner.email.$touch()" :class="{'is-invalid':$v.partner.email.$error, 'is-valid':!$v.partner.email.$invalid}"/>
<div class="invalid-feedback">
<span v-if="!$v.partner.email.required">please enter a valid email address</span>
<span v-if="!$v.partner.email.email">please enter a valid email address</span>
</div>
</div>
validations: {
partner: {
email: { required, email },
}
},
methods: {
beforeSave() {
event.preventDefault();
if (this.$v.$invalid) {
alert("Error");
} else {
this.save();
}
}
}
The current issue is that validation only triggers if the user types something in another input field. This leads to error messages showing even with correct email entries.
https://i.stack.imgur.com/P3B63.png
Even when I enter an incorrect email address, the system still accepts it as a valid input, allowing the user to submit the form.