BootstrapVue Vuelidate Custom Error Message For Each Validator Rule

<template>  <div>    <b-form ref="form" @submit.prevent="submit">      <b-form-group        label="Name"        label-for="input-name"        invalid-feedback="Name is required"      >        <b-form-input          :state="validateState($v.item.name)"          id="input-name"          v-model="$v.item.name.$model"        ></b-form-input>      </b-form-group>      <b-form-group        label="Url"        label-for="input-url"      >        <b-form-input          :state="validateState($v.item.url)"          id="input-url"          v-model="$v.item.url.$model"        ></b-form-input>        <b-form-invalid-feedback v-if="!$v.item.url.required">          URL is required        </b-form-invalid-feedback>        <b-form-invalid-feedback v-else-if="!$v.item.url.url">          URL is invalid        </b-form-invalid-feedback>        <b-form-invalid-feedback v-else-if="!$v.item.url.allow">          URL is not allowed        </b-form-invalid-feedback>      </b-form-group>      <b-button type="submit" variant="primary">Submit</b-button>    </b-form>  </div></template><script>import { validationMixin } from "vuelidate"import { required, url, minLength } from "vuelidate/lib/validators"export default {  mixins: [validationMixin],  // props: ['item'],  data() {    item: {      name: 'Desmond'    },  },  validations: {    item: {      name: {        required      },      url: {        required,         url,        allow(value) {          const urlObj = new URL(value)          if (urlObj.hostname == 'google.com')            return false          return true        }      }    }  },  methods: {    validateState(item) {      const { $dirty, $error } = item      return $dirty ? !$error : null    },    submit() {      this.$v.item.$touch()      if (this.$v.item.$anyError)        return false      console.log(this.item)      alert("Form submitted!")    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.