basic validation with vuelidate

pages/contact.vue

@@ -2,22 +2,27 @@
   <ContentPage heading="The Contact Page Heading">
 
     <b-field label="Name">
-      <b-input placeholder="Your name ...">
+      <b-input v-model.trim="form.name"
+               placeholder="Your name ...">
       </b-input>
     </b-field>
 
     <b-field label="Email">
-      <b-input placeholder="Your email ...">
+      <b-input v-model="form.email"
+               type="email"
+               placeholder="Your email ...">
       </b-input>
     </b-field>
 
     <b-field label="Subject">
-      <b-input placeholder="Your subject ...">
+      <b-input v-model="form.subject"
+               placeholder="Your subject ...">
       </b-input>
     </b-field>
 
     <b-field label="Message">
-      <b-input placeholder="Your message ..."
+      <b-input v-model="form.message"
+               placeholder="Your message ..."
                type="textarea">
       </b-input>
     </b-field>
@@ -32,6 +37,7 @@
 
 <script>
 import ContentPage from '@/components/ContentPage'
+import { required, email } from 'vuelidate/lib/validators'
 
 export default {
   name: 'HomePage',
@@ -42,13 +48,56 @@ export default {
 
   data() {
     return {
-      isDisabled: false,
+      attemptedSubmit: false,
+      form: {
+        name: "",
+        email: "",
+        subject: "",
+        message: "",
+      }
+    }
+  },
+
+  computed: {
+    isDisabled () {
+      return this.attemptedSubmit && this.$v.form.$invalid
+    }
+  },
+
+  validations: {
+    form: {
+      name: {
+        required,
+      },
+      email: {
+        required,
+        email
+      },
+      message: {
+        required,
+      }
     }
   },
 
   methods: {
     onSubmit () {
-      console.log('Submitting ...')
+      this.attemptedSubmit = true
+      if (this.$v.form.$invalid) {
+        this.$toast.open({
+          message: 'Please correct errors before submitting.',
+          type: 'is-danger'
+        })
+        return
+      }
+      this.$toast.open('Submitting your message ...')
+      window.setTimeout(() => {
+        this.$toast.open({
+          message: 'Thank you, your message has been succesfully sent.',
+          type: 'is-success'
+        })
+        this.form.message = ''
+        this.form.subject = ''
+      }, 1000)
     },
   },
 }