Merge pull request #569 from Safelite/CSR-465-add-validation-to-parts-page

Csr 465 add validation to parts page

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -29,7 +29,11 @@
           :buttonID="`${glassLocation}-${glassName}-${name}`"
           :groupName="`${glassLocation}-${glassName}`"
           @isCheckedChanged="ResetTintAndPartSelections()"
+          :validationRules="validationRules"
         />
+        <div class="row form-test-error mt-1">
+          <error-message :name="`${glassLocation}-${glassName}`" v-if="!suppressError"></error-message>
+        </div>
       </div>
     </div>
     <transition name="fade" mode="out-in">
@@ -53,6 +57,7 @@
             :loaderEnabled="false"
             isRequired
             :groupName="`${glassLocation}-${glassName}-${name}`"
+            :validationRules="validationRules"
           />
         </div>
       </div>
@@ -68,6 +73,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import { getTintImage } from "@/constants/tint-mapper";
 import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
+import { ErrorMessage } from 'vee-validate';
 
 export default {
   name: "glass-part-question",
@@ -84,6 +90,7 @@ export default {
     glassLocation: String,
     colorAnswers: Array,
     modelValue: Object,
+    validationRules: String,
   },
   mounted() {
     this.LoadPreselectedValues();
@@ -91,6 +98,7 @@ export default {
   components: {
     listCard,
     buttonQuestion,
+    ErrorMessage,
   },
   computed: {
     colorQuestionText() {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -1,5 +1,11 @@
 <template>
-<div class="page-container-grouped-styles vehicle-parts">
+  <Form
+  @submit="onSubmit"
+  @invalid-submit="onInvalidSubmit"
+  ref="theForm"
+  v-slot="{ meta }"
+  >
+  <div class="page-container-grouped-styles vehicle-parts">
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
@@ -29,11 +35,19 @@
         :glassLocation="item.glassLocation"
         :glassName="item.glassName"
         :colorAnswers="item.colorAnswers"
+        validationRules="replace-options-required"
         />
       </div>
-      <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+      <funnelFooter
+        cmsWidgetName="FunnelFooterWidget"
+        ref="funnelFooter"
+        :isForwardActionDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
     </div>
-</div>
+  </div>
+</Form>
 </template>
 
 <script>
@@ -50,6 +64,12 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
   name: "vehicle-parts",
@@ -76,22 +96,23 @@ export default {
       })
     );
   });
-  },
+},
-  data() {
+data() {
   return {
     glassParts: {},
     alertWidgetData: Object,
   };
-  },
+},
-  components: {
+components: {
+  Form,
   glassPartQuestion,
   funnelHeader,
   vehicleBanner,
   funnelSubHeader,
   funnelFooter,
   alert,
-  },
+},
-  computed: {
+computed: {
   PartsForQuestions() {
     const partsData = this.PartsFromApi;
 
@@ -126,8 +147,8 @@ export default {
   RefPrefix() {
     return "partQuestion";
   },
-  },
+},
-  methods: {
+methods: {
   arePagePrerequisitesValid() {
     // Check if isRepair is populated and if the pageData we need is here (Parts data)
     if (
@@ -211,9 +232,9 @@ export default {
       });
     });
   },
-  },
+},
-  mounted() {
+mounted() {
   this.LoadInitialPartsData();
-  },
+},
 };
 </script>