Forgot Password And Debuging

resources/js/vue/views/Auth/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-form >
+  <v-form ref="form" >
     <v-container grid-list-xs>
       <v-layout row wrap class="justify-center">
         <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
@@ -12,8 +12,9 @@
                   v-model="cell_number"
                   name="cellnumber"
                   label="Cell Number"
-                  id="id1"
                   color="black"
+                  :rules="[rules.required, rules.cellNumberCounter]"
+                  mask="#### ### ####"
                 ></v-text-field>
               </v-flex>
             </v-layout>
@@ -26,6 +27,7 @@
                   :type="show1 ? 'text' : 'password'"
                   :append-icon="show1 ? 'visibility' : 'visibility_off'"
                   @click:append="show1 = !show1"
+                  :rules="[rules.required, rules.passCounter]"
                   color="black"
                   class="pa-2"
                 ></v-text-field>
@@ -60,6 +62,11 @@ export default {
       cell_number: "",
       password: "",
       show1: false,
+      rules: {
+        required: value => !!value || "Required.",
+        passCounter: value => (value && value.length >= 8) || "Min 8 characters",
+        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
+      }
     };
   },
   computed: {
@@ -75,11 +82,10 @@ export default {
       ]),
       handleSubmit() {
           // Perform a simple validation that cell_number and password have been typed in
-          if (this.cell_number != '' && this.password != '') {
-
-            this.login({cell_number: this.cell_number, password: this.password});
-            this.password = "";
-          }
+        if (this.$refs.form.validate()) { 
+          this.login({cell_number: this.cell_number, password: this.password});
+          this.password = "";
+        }
       }
   }
 };