diff --git a/README.md b/README.md
index 6c7073c..c283adb 100644
--- a/README.md
+++ b/README.md
@@ -39,12 +39,6 @@ beforeRouteLeave(routeTo, routeFrom, next) {
 }
 ```
 
-### Base Form elements
-
-- Look up `vue-multiselect` for when you want to use a select field and the options have objects in them.
-- `v-on="$listeners"` means that this element inherits the listners of the parent component
-- `v-bind="$attrs"` won't work for inheriting class and style attributes
-
 ### Global Route Gaurds & Per Route Gaurds
 
 Global Route Gaurds allow us to add hooks that run whenever nagigation is triggered. These gaurds are called on the `router` object. We need to set the `router` object to a contant.
@@ -99,6 +93,26 @@ _NOTE:_ Since `beforeEnter` is only called when the component is created it's us
 
 _NOTE2:_ Vue Router may get another per-route guard called beforeResolve which called on Create and Update. If it is available it would be a more elegant solution to our pagination problem.
 
+### Base Form elements
+
+- Look up `vue-multiselect` for when you want to use a select field and the options have objects in them.
+- `v-on="$listeners"` means that this element inherits the listners of the parent component
+- `v-bind="$attrs"` won't work for inheriting class and style attributes. Vue will have $class and $style I believe
+
+### Form Validation
+
+`npm install vuelidate --save`
+
+Adding `validations` to our component adds a computed property `$v` to our component. This object will have boolean values for the associated validators. When all validators pass `$v.$invalid: false`.
+
+### Advanced folder structure
+
+📂 A pages directory for your Application views and routes.
+
+📂 A layouts directory for your layout templates.
+
+📂 A store directory for your Vuex store files.
+
 ## Following along?
 
 We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.
diff --git a/package-lock.json b/package-lock.json
index af2c278..8771161 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12684,6 +12684,11 @@
       "resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.5.3.tgz",
       "integrity": "sha512-vCYLx7rbYPEqLLx1EplFQHxkMA/SAFJvwj5PYzeaG98q7hynLZMXsvhE8FPr08PJUiKA+zRknq0CqRioNYLYkg=="
     },
+    "vuelidate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
+      "integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
diff --git a/package.json b/package.json
index 6d69c49..af18903 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^1.5.3",
+    "vuelidate": "^0.7.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 857cdc7..66ed644 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -2,7 +2,7 @@
   <div id="nav" class="nav">
     <router-link to="/" class="brand">Real World Events</router-link>
     <nav>
-      <router-link :to="{ name: 'event-list' }">List</router-link> |
+      <router-link :to="{ name: 'event-list' }">List</router-link>|
       <router-link :to="{ name: 'event-create' }">Create</router-link>
     </nav>
   </div>
diff --git a/src/main.js b/src/main.js
index 8d7c0e5..6d131d5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,9 @@ import store from './store/store'
 import BaseIcon from '@/components/BaseIcon'
 // Here we need the styles for nprogress
 import 'nprogress/nprogress.css'
+import Vuelidate from 'vuelidate'
+
+Vue.use(Vuelidate)
 
 Vue.component('BaseIcon', BaseIcon)
 
diff --git a/src/router.js b/src/router.js
index 6d8ee01..9d69fee 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import NProgress from 'nprogress'
 import store from '@/store/store'
 import NotFound from './views/NotFound.vue'
 import NetworkIssue from './views/NetworkIssue.vue'
+import Example from './views/Example.vue'
 
 Vue.use(Router)
 
@@ -20,6 +21,10 @@ const router = new Router({
       component: EventList,
       props: true
     },
+    {
+      path: '/example',
+      component: Example
+    },
     {
       path: '/event/create',
       name: 'event-create',
diff --git a/src/views/EventShow.vue b/src/views/EventShow.vue
index df2d8fe..b3de757 100644
--- a/src/views/EventShow.vue
+++ b/src/views/EventShow.vue
@@ -18,7 +18,11 @@
 
     <h2>
       Attendees
-      <span class="badge -fill-gradient">{{ event.attendees ? event.attendees.length : 0 }}</span>
+      <span class="badge -fill-gradient">
+        {{
+        event.attendees ? event.attendees.length : 0
+        }}
+      </span>
     </h2>
     <ul class="list-group">
       <li v-for="(attendee, index) in event.attendees" :key="index" class="list-item">
diff --git a/src/views/Example.vue b/src/views/Example.vue
new file mode 100644
index 0000000..7129933
--- /dev/null
+++ b/src/views/Example.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>Example for vuelidate</h1>
+    <input type="email" placeholder="What's your email" v-model="email">
+    <p v-if="!$v.email.email">Please enter a valid email.</p>
+    <p v-if="!$v.email.required">Email is required.</p>
+    <button :disabled="!$v.$invalid" type="submit">Submit</button>
+  </div>
+</template>
+
+<script>
+import { required, email } from 'vuelidate/lib/validators'
+
+export default {
+  data() {
+    return {
+      email: null
+    }
+  },
+  validations: {
+    email: {
+      required, // Required validator ensures that the field has a value.
+      email // Email validator ensures that the value is indeed an email
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>