Validation added to property screens

src/components/property/propertyCreate.vue

                     class="form-control"
                     name="propertyUsageType"
                     id="propertyUsageType"
-                    v-model="property.propertyUsageType"
+                    v-model="propertyType"
                     @change="TypeChanged"
                   >
                     <option value="Residential">Residential</option>
                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label>Property Type *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text" style="color: #60CBEB">
                     <b>T</b>
                     name="propertyType"
                     id="propertyType"
                     v-model="property.propertyTypeId"
+                    @change="PropertyTypeSelected"
                   >
                     <option value="0">Please select type</option>
                     <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a type</p>
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
                 </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
+                <label>Province *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
+                <label>City *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
+                <label>Suburb *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a Suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
             >
               Save
             </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
         [{ indent: '-1' }, { indent: '+1' }],
       ],
       error: '',
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.provinceId === 0) {
+        this.showProvinceError = true;
+      }
+      if (this.property.cityId === 0) {
+        this.showCityError = true;
+      }
+      if (this.property.suburbId === 0) {
+        this.showSuburbError = true;
+      }
+
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+
       this.wait = true;
       if (this.salesType === 'Sale') {
         this.property.isSale = true;
     Close() {
       this.$router.push('/property/admin/list/my');
     },
+    PropertyTypeSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.showPropertyTypeError = false;
+      } else {
+        this.showPropertyTypeError = true;
+      }
+    },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.showProvinceError = false;
+      } else {
+        this.showProvinceError = true;
       }
     },
     CitySelected(item) {
         this.getSuburbs(
           Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
         );
+        this.showCityError = false;
+      } else {
+        this.showCityError = true;
       }
     },
     getPostalCode(item) {
       this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      if (item.target.options.selectedIndex > 0) {
+        this.showSuburbError = false;
+      } else {
+        this.showSuburbError = true;
+      }
     },
     loadedImages(values) {
       this.images = values;

src/components/property/propertyeditPage.vue

                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Sale Type</label>
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a Sales Type</p>
+                </div>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label>Property Type *</label>
                 <propField
                   :display="property.propertyType ? property.propertyType.description : ''"
                   :editType="'selector'"
                 />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
+                <label>Province *</label>
                 <propField
                   :display="property.province ? property.province.description : ''"
                   :editType="'selector'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
-
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
+                <label>City *</label>
                 <propField
                   :display="property.city ? property.city.description : ''"
                   :editType="'selector'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
+                <label>Suburb * </label>
                 <propField
                   :display="property.suburb ? property.suburb.description : ''"
                   :editType="'selector'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
                 <label for="Property Description">Description</label>
                 <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
                 <br />
-                <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
+                <p>
+                  * A listing fee of R380 including VAT is payable to list your Property on the
+                  Uni-Vate website
+                </p>
               </div>
             </div>
             <div class="form-group row" />
             <div
               class="col-md-6"
-              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
             >
               <div v-for="(item, i) in propertyOverviewFields[0].fields" :key="item.id">
                 <label>{{ item.name }}</label>
                   @UpdateValue="UpdateValue"
                 />
               </div>
+              <br />
             </div>
             <div class="form-group row" />
             <div class="row">
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
               :disabled="!mayEdit"
-            >Save</button>
+            >
+              Save
+            </button>
             <button
               type="button"
               @click="Close()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Close</button>
+              :disabled="
+                showPropertyTypeError || showProvinceError || showCityError || showSuburbError
+              "
+            >
+              Close
+            </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
 <script>
 import { mapState, mapActions } from 'vuex';
 import { VueEditor } from 'vue2-editor';
-import { setTimeout } from 'timers';
 import ImageLoad from './propertyImage.vue';
 import propField from './propertyFieldEditor.vue';
 
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ['bold', 'italic', 'underline', 'strike'],
-        [
-          { align: '' },
-          { align: 'center' },
-          { align: 'right' },
-          { align: 'justify' },
-        ],
+        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
         [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
         { id: 'Month', description: 'Month' },
         { id: 'Day', description: 'Day' },
       ],
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
       'getListsForPropertyEdit',
     ]),
     ...mapActions('property', ['getPropertyTypes']),
-    ...mapActions('propertyEdit', [
-      'getSavedPropertyData',
-      'updateProperty',
-      'mayEditProperty',
-    ]),
+    ...mapActions('propertyEdit', ['getSavedPropertyData', 'updateProperty', 'mayEditProperty']),
     UpdateValue(item) {
       if (item.isUDF) {
         if (item.isPropOverview) {
-          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value = item.value;
         } else if (item.isPropOverview === false) {
-          this.propertyFields[item.arrayIndex].fields[
-            item.arrayItemIndex
-          ].value = item.value;
+          this.propertyFields[item.arrayIndex].fields[item.arrayItemIndex].value = item.value;
         }
       } else if (!item.isUDF) {
         if (item.fieldName) {
             this.property.isSale = isSaleValue;
           }
           if (item.fieldName === 'propertyType') {
-            this.property.propertyType = this.propertyTypes.find(
-              pt => pt.description === item.value,
-            );
-            this.property.propertyTypeId = this.property.propertyType.id;
+            if (item.value !== '') {
+              this.property.propertyType = this.propertyTypes.find(
+                pt => pt.description === item.value,
+              );
+              this.property.propertyTypeId = this.property.propertyType.id;
+              this.showPropertyTypeError = false;
+            } else {
+              this.showPropertyTypeError = true;
+            }
           }
           if (item.fieldName === 'propertyName') {
             this.property.propertyName = item.value;
           }
           if (item.fieldName === 'province') {
             if (item.value !== '') {
-              this.property.province = this.provinces.find(
-                p => p.description === item.value,
-              );
+              this.property.province = this.provinces.find(p => p.description === item.value);
               this.property.provinceId = this.property.province.id;
               this.getCities(Object.assign({}, { province: item.value }));
               this.property.city = null;
               this.property.suburb = null;
               this.property.addressLine3 = '';
+              this.showProvinceError = false;
+              this.showCityError = true;
+              this.showSuburbError = true;
             } else {
               this.property.province = null;
               this.property.city = null;
               this.property.addressLine3 = '';
               this.cities = [];
               this.suburbs = [];
+              this.showProvinceError = true;
             }
           }
           if (item.fieldName === 'city') {
             if (item.value !== '') {
-              const newCity = this.cities.find(
-                p => p.description === item.value,
-              );
+              const newCity = this.cities.find(p => p.description === item.value);
               this.property.city = newCity;
               this.property.cityId = newCity.id;
               this.getSuburbs(
               );
               this.property.suburb = null;
               this.property.addressLine3 = '';
+              this.showCityError = false;
+              this.showSuburbError = true;
             } else {
               this.property.city = null;
               this.property.suburb = null;
               this.property.addressLine3 = '';
               this.suburbs = [];
+              this.showCityError = true;
             }
           }
           if (item.fieldName === 'suburb') {
             if (item.value !== '') {
-              const newSuburb = this.suburbs.find(
-                p => p.description === item.value,
-              );
+              const newSuburb = this.suburbs.find(p => p.description === item.value);
               this.property.suburb = newSuburb;
               this.property.suburbId = newSuburb.id;
               this.property.addressLine3 = this.property.suburb.postalCode;
+              this.showSuburbError = false;
             } else {
               this.property.suburb = null;
               this.property.addressLine3 = '';
+              this.showSuburbError = true;
             }
           }
           if (item.fieldName === 'price') {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
-      this.wait = true;
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.province === null) {
+        this.showProvinceError = true;
+      }
+      if (this.property.city === null) {
+        this.showCityError = true;
+      }
+      if (this.property.suburb === null) {
+        this.showSuburbError = true;
+      }
 
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+      this.wait = true;
       this.newPropertyImages.propertyId = this.property.id;
       this.newPropertyImages.Images = [];
       // eslint-disable-next-line no-plusplus
           isDefault: setAsDefault,
         });
       }
-
       this.property.propertyImages = this.propertyImages;
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.property.propertyImages.length; i++) {