Merge pull request #1096 from Safelite/feature/richardson/INSR-8529

Clear parent error on child form failure

src/digital-components/textbox-question/textbox-question.vue

@@ -92,6 +92,10 @@ export default {
         buttonMain
     },
     props: {
+        alwaysEmitFieldErrorOnClick: {
+            type: Boolean,
+            default: false
+        },
         type: {
             type: String,
             default: 'text'
@@ -136,7 +140,7 @@ export default {
             default: () => {}
         }
     },
-    emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned', 'click-event'],
+    emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned', 'click-event', 'field-has-error'],
     setup(props) {
         const propsClone = { ...props };
         const { modelValue } = propsClone;
@@ -254,6 +258,8 @@ export default {
             if (result.valid) {
                 this.handleChange(this.value);
                 this.$emit('click-event');
+            } else if (this.alwaysEmitFieldErrorOnClick) {
+                this.$emit('field-has-error', true);
             }
         }
     }

src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue

@@ -2,6 +2,7 @@
     <textboxQuestion
         ref="zipInputTextQuestion"
         v-model="internalZipcode"
+        :alwaysEmitFieldErrorOnClick="true"
         :cmsWidgetName="cmsWidgetName"
         inputId="serviceZipCode"
         cornerStyle="rounded"
@@ -9,7 +10,8 @@
         isRequired
         :hasError="hasError"
         :validationRules="`zip-required|${cmsWidgetName}-zip-format`"
-        @clickEvent="updateModelValue" />
+        @clickEvent="updateModelValue"
+        @fieldHasError="handleFieldError" />
 </template>
 
 <script>
@@ -41,7 +43,7 @@ export default {
             default: false
         }
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'field-has-error'],
     data() {
         return {
             internalZipcode: this.modelValue
@@ -58,6 +60,9 @@ export default {
         defineRule(`${this.cmsWidgetName}-zip-format`, regex(/^\d{5}$/, this.serviceZipFormatErrorMessage));
     },
     methods: {
+        handleFieldError(hasError) {
+            this.$emit('field-has-error', hasError);
+        },
         updateModelValue() {
             this.$emit('update:modelValue', this.internalZipcode);
         }

src/layouts/schedule-page/service-location/shop-address/shop-address.vue

@@ -77,7 +77,8 @@
                     :ref="SERVICE_ZIP_QUESTION_REF_NAME"
                     v-model="internalZipcode"
                     customInputId="serviceZipCode"
-                    :cmsWidgetName="textboxQuestionWidgetName" />
+                    :cmsWidgetName="textboxQuestionWidgetName"
+                    @fieldHasError="handleFieldError" />
                 <div
                     v-if="errorMessage"
                     ref="errorMessageDiv"
@@ -327,6 +328,11 @@ export default {
             }
             return addressLine2;
         },
+        handleFieldError(hasChildFormFieldError) {
+            if (hasChildFormFieldError) {
+                this.errorMessage = '';
+            }
+        },
         forceServiceZipRerender() {
             this.renderServiceZip = false;
             this.$nextTick(() => {