Technically, there is no API to perform validation or trigger error programatically, but we can hack around it with custom validation rules.
- The validation error is cleared once the model value changed
- If you would like to retry/resubmit again without changing the value (maybe some server error not due to errorness value), don't use this kind of validation (use a popup/toast to show the error instead)
<template> <b-form inline class="justify-content-center" ref="form" @submit.prevent="submit"> <b-form-group label="Email" label-sr-only label-for="input-email"> <b-input :state="validateState($v.email)" v-model="$v.email.$model" id="input-email" placeholder="Your email" ></b-input> <b-button type="submit" variant="primary">Request Invite</b-button> <b-form-invalid-feedback v-if="!$v.email.email">Invalid email address.</b-form-invalid-feedback> <b-form-invalid-feedback v-if="!$v.email.required">This is a required field.</b-form-invalid-feedback> <b-form-invalid-feedback v-if="!$v.email.submitOk">{{ submitErrorMessage }}</b-form-invalid-feedback> </b-form-group> </b-form></template><script>import { validationMixin } from "vuelidate"import { required, email } from "vuelidate/lib/validators"const submitOk = (value, vm) => { if (vm.submitError) { // clear error after 1st display const error = vm.submitError vm.submitErrorMessage = error vm.submitError = false return false } return true}export default { mixins: [validationMixin], data() { return { email: null, submitError: false, submitErrorMessage: null } }, validations: { email: { required, email, submitOk }, }, methods: { validateState(item) { const { $dirty, $error } = item return $dirty ? !$error : null }, async submit() { // perform custom validation or server validation if (this.email == '[email protected]') { this.submitError = 'Email already exist' return } alert('OK') } }}</script>