BootstrapVue Form With Validation (vuelidate)

April 9, 2020

npm install vuelidate --save

Create Form Component

<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-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
import { validationMixin } from "vuelidate"
import { required, minLength } from "vuelidate/lib/validators"

export default {
  mixins: [validationMixin],
  // props: ['item'],
  data() {
    item: {
      name: 'Desmond'
    },
  },
  validations: {
    item: {
      name: {
        required
      },
    }
  },
  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>

References:

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.

Tags:

Related entries:

BootstrapVue Show Form in Modal

Vue.js Import Bootstrap Scss

Setup BootstrapVue With Vue Cli

Setup Bootstrap 4 With Vue Cli 3 Webpack

Vue.js BootstrapVue Prevent Button Double Click (Disable) and Show Loading on Click

Vuejs Signup/Request Invite/Newsletter Email Component With BootstrapVue and Validation (vuelidate)

BootstrapVue Form Array/Collection Input with Vuelidate

BootstrapVue Form Array to Textarea With vuelidate