Improving validation

README.md

@@ -1,6 +1,6 @@
 # vue-distributors
 
-> A vuejs knoledge test
+> A vuejs playground project to add a reactive form to edit and add distributors
 
 ## Build Setup
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-distributors",
-  "description": "A vuejs knoledge test",
+  "description": "A vuejs knowledge test",
   "version": "1.0.0",
   "author": "Herton <herton@dantas.info>",
   "license": "MIT",

src/components/Distributor-form.vue

@@ -9,7 +9,7 @@
                       v-model="distributorLocal.title"
                       :placeholder="labels.titlePlaceholder">
         </b-form-input>
-        <b-form-invalid-feedback>
+        <b-form-invalid-feedback v-if="showValidationErrors">
           {{labels.required}}
         </b-form-invalid-feedback>
       </b-form-group>
@@ -172,6 +172,7 @@ export default {
       distributorLocal: {
         contacts:[],
       },
+      showValidationErrors: false,
     }
   },
   computed: {
@@ -216,7 +217,7 @@ export default {
             // Returns true if the title and contact fields are valid
             validations.pass = (contactsValid && validations.title) ? true : false;
           }
-
+          
         return validations;
       },
   },
@@ -234,11 +235,17 @@ export default {
           saveDistributor: types.SET_DISTRIBUTOR,
       }),
     onSubmit() {
-      this.saveDistributor({
-        id: this.distributorLocal.id, 
-        distributor: this.distributorLocal
-      });
-      this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
+      if (this.validations.pass) {
+        this.saveDistributor({
+          id: this.distributorLocal.id, 
+          distributor: this.distributorLocal
+        });
+        this.showValidationErrors = false;
+        this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
+      } else {
+        this.showValidationErrors = true;
+      }
+
     },
     onAddContact() {
       this.newContact.show = true;

src/store/modules/distributor/actions.js

@@ -52,7 +52,7 @@ export default {
         if (payload.id) {
             // api call
             // Update server with what changed
-        } else { debugger
+        } else {
             // api call
             // Add new distributor
         }