Update vehicle.vue

src/layouts/vehicle/vehicle.vue

@@ -29,6 +29,7 @@
                                     :isDisabled="!makeOptions.length"
                                     :options="makeOptions"
                                     cmsWidgetName="VehicleMakeQuestion"
+                                    v-validate="{ rules: 'required', disabled: !makeOptions.length }"
                                     validationRules="make-required"
                                     placeHolderText="Select make"
                                     inputId="makeQuestionField" />
@@ -40,6 +41,7 @@
                                     cmsWidgetName="VehicleModelQuestion"
                                     :isDisabled="!modelOptions.length"
                                     :options="modelOptions"
+                                    v-validate="{ rules: 'required', disabled: !modelOptions.length }"
                                     validationRules="model-required"
                                     placeHolderText="Select model"
                                     inputId="modelQuestionField" />
@@ -51,6 +53,7 @@
                                     cmsWidgetName="VehicleStyleQuestion"
                                     :isDisabled="!styleOptions.length"
                                     :options="styleOptions"
+                                    v-validate="{ rules: 'required', disabled: !styleOptions.length }"
                                     validationRules="style-required"
                                     placeHolderText="Select style"
                                     inputId="styleQuestionField" />
@@ -99,10 +102,34 @@ import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
 
 //define validation rules
-defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+defineRule("year-required", (value) => {
-defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+    if (!value || !value.length ) {
-defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+        return errorMessages.YEAR_REQUIRED;
-defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
+    }
+    return true;
+});
+defineRule("make-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.MAKE_REQUIRED;
+    }
+    return true;
+});
+defineRule("model-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.MODEL_REQUIRED;
+    }
+    return true;
+});
+defineRule("style-required", (value) => {
+    if (!value || !value.length) {
+        return errorMessages.STYLE_REQUIRED;
+    }
+    return true;
+});
+// defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+// defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+// defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+// defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
     name: "vehicle",
@@ -242,6 +269,9 @@ export default {
                 }
             } else {
                 this.makeOptions = [];
+                this.selectedMake = null;
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedMake(make) {
@@ -255,6 +285,8 @@ export default {
                 }
             } else {
                 this.modelOptions = [];
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedModel(model) {
@@ -271,6 +303,7 @@ export default {
                 }
             } else {
                 this.styleOptions = [];
+                this.selectedStyle = null;
             }
         },
         async selectedStyle(style) {