apply form validation to our application

Author: hootlex

package.json

@@ -18,6 +18,7 @@
     "nprogress": "^0.2.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vuelidate": "^0.7.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/main.js

@@ -6,7 +6,9 @@ import App from './App'
 import router from './router'
 import store from '@/store'
 import AppDate from '@/components/AppDate'
+import vuelidate from 'vuelidate'
 
+Vue.use(vuelidate)
 Vue.component('AppDate', AppDate)
 
 Vue.config.productionTip = false

src/pages/PageRegister.vue

@@ -7,27 +7,59 @@
 
         <div class="form-group">
           <label for="name">Full Name</label>
-          <input v-model="form.name" id="name" type="text" class="form-input">
+          <input
+            v-model="form.name"
+            @blur="$v.form.name.$touch()"
+            id="name" type="text" class="form-input">
+          <template v-if="$v.form.name.$error">
+            <span v-if="!$v.form.name.required" class="form-error">This field is required</span>
+          </template>
         </div>
 
         <div class="form-group">
           <label for="username">Username</label>
-          <input v-model="form.username" id="username" type="text" class="form-input">
+          <input
+            v-model="form.username"
+            @blur="$v.form.username.$touch()"
+            id="username" type="text" class="form-input">
+          <template v-if="$v.form.username.$error">
+            <span v-if="!$v.form.username.required" class="form-error">This field is required</span>
+          </template>
         </div>
 
         <div class="form-group">
           <label for="email">Email</label>
-          <input v-model="form.email" id="email" type="email" class="form-input">
+          <input
+            v-model="form.email"
+            @blur="$v.form.email.$touch()"
+            id="email" class="form-input">
+          <template v-if="$v.form.email.$error">
+            <span v-if="!$v.form.email.required" class="form-error">This field is required</span>
+            <span v-else-if="!$v.form.email.email" class="form-error">This in not a valid email address</span>
+          </template>
         </div>
 
         <div class="form-group">
           <label for="password">Password</label>
-          <input v-model="form.password" id="password" type="password" class="form-input">
+          <input
+            v-model="form.password"
+            @blur="$v.form.password.$touch()"
+            id="password" type="password" class="form-input">
+          <template v-if="$v.form.password.$error">
+            <span v-if="!$v.form.password.required" class="form-error">This field is required</span>
+            <span v-if="!$v.form.password.minLength" class="form-error">The password must be at least 6 characters long</span>
+          </template>
         </div>
 
         <div class="form-group">
           <label for="avatar">Avatar</label>
-          <input v-model="form.avatar" id="avatar" type="text" class="form-input">
+          <input
+            v-model="form.avatar"
+            @blur="$v.form.avatar.$touch()"
+            id="avatar" type="text" class="form-input">
+          <template v-if="$v.form.avatar.$error">
+
+          </template>
         </div>
 
         <div class="form-actions">
@@ -43,6 +75,7 @@
 </template>
 
 <script>
+    import {required, email, minLength} from 'vuelidate/lib/validators'
     export default {
       data () {
         return {
@@ -56,8 +89,34 @@
         }
       },
 
+      validations: {
+        form: {
+          name: {
+            required
+          },
+          username: {
+            required
+          },
+          email: {
+            required,
+            email
+          },
+          password: {
+            required,
+            minLength: minLength(6)
+          },
+          avatar: {
+
+          }
+        }
+      },
+
       methods: {
         register () {
+          this.$v.form.$touch()
+          if (this.$v.form.$invalid) {
+            return
+          }
           this.$store.dispatch('auth/registerUserWithEmailAndPassword', this.form)
             .then(() => this.successRedirect())
         },

yarn.lock

@@ -5101,6 +5101,10 @@ vue@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.2.tgz#fd367a87bae7535e47f9dc5c9ec3b496e5feb5a4"
 
+vuelidate@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"
+
 vuex@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"