<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>
❤️ 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.