Setup Vue.js Form Validation using VeeValidate with Bootstrap 4

May 31, 2019

Install

yarn add vee-validate

or

npm install vee-validate --save

Setup

Edit src/main.js to include

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

Vue.js Component

This is a simple form with email input and a submit button.

  • Validation UI will not trigger before button is clicked (controlled by state.isValidation).
  • After button is clicked, validation UI is updated as the text input changed.
<template>
  <div>
    <form @submit.prevent="onSubmit" class="needs-validation" novalidate>
      <div class="form-row  justify-content-md-center">
        <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>
      </div>
      <div class="form-row justify-content-md-center">
        <div class="col-md-auto mb-3">
          <label for="inputEmail" class="sr-only">Your email</label>
          <input v-model="email" v-validate="{ required: true, email: true }" :class="{'form-control': true, 'is-invalid': errors.has('email') && state.isValidation, 'is-valid': !errors.has('email')} && state.isValidation" name="email" type="email" id="inputEmail" placeholder="Your email">
          <div class="invalid-feedback">{{ errors.first('email') }} </div>
        </div>
        <div class="col-md-auto mb-3">
          <button type="submit" class="btn btn-primary">Request Invite</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      state: {
        isValidation: false
      }
    }
  },
  methods: {
    onSubmit() {
      this.save();
    },
    save() {
      this.isValidation = true
      this.$validator.validate().then(valid => {
        if (!valid) {

        }
        else {
          // do something
        }
      });
    }
  }
}
</script>

NOTE: Refer Setup Bootstrap 4 With Vue Cli 3 Webpack.

NOTE: There is also an option to use Bootstrap - Forms Tooltips for error messages.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.