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

April 10, 2020
<template>
  <b-form inline class="justify-content-center" ref="form" @submit.prevent="submit">
    <b-form-group invalid-feedback="Email is required" 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-group>
  </b-form>
</template>

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

export default {
  mixins: [validationMixin],
  data() {
    return {
      email: null
    }
  },
  validations: {
    email: {
      required, email
    },
  },
  methods: {
    validateState(item) {
      const { $dirty, $error } = item
      return $dirty ? !$error : null
    },
    submit() {
      this.$v.$touch()
      if (this.$v.$anyError)
        return false

      alert(`Form submitted for ${this.email}`)
    }
  }
}
</script>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.