Update validation.

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

@@ -1,11 +1,18 @@
 <template>
-    <div class="phonenumber-question d-flex flex-column">
+    <div class="phonenumber-question d-flex flex-column"
+        :class="[
+            (errors && errors.length) || hasError ? 'has-error' : '',
+            hideInput ? 'hide-input' : '',
+        ]">
         <label for="phone-number" class="mb-1 fw-bold" v-html="phoneNumberQuestionWidget"></label>
         <input
             class="form-control"
             id="phone-number"
+            name="phone-number"
             v-model="phoneNumber"
             @input="formatPhoneNumber"
+            @change="handleChange"
+            @blur="handleChange"
             :maxlength="phoneNumberMaxLength"
             pattern="[0-9\-]+"
             :aria-required="isRequired"
@@ -109,6 +116,14 @@ export default {
             });
         });
     },
+    watch: {
+        async value(newValue) {
+            const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
+            if (result.valid) {
+                this.handleChange(newValue); // trigger full validation on this field only
+            }
+        },
+    },
 };
 </script>
 

src/layouts/customer-details/customer-details.vue

@@ -20,15 +20,15 @@
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="emailQuestionWidget"
-                v-model="email"
+                v-model="customerModel.emailAddress"
                 inputId="email"
                 validationRules="email-address-required|email-address-format" />
             <phoneNumberQuestion
                 cmsWidgetName="phoneNumberQuestionWidget"
                 class="mb-4"
-                v-model="phoneNumber"
+                v-model="customerModel.phoneNumber"
                 isRequired
-                validationRules="phone-number-required" />
+                validationRules="phone-number-required|phone-number-format" />
             <textareaQuestion
                 class="mb-4"
                 v-model="techNotes"
@@ -69,6 +69,13 @@ import { useField, validate } from "vee-validate";
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
 defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
+defineRule(
+    "phone-number-format",
+    regex(
+        /^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/,
+        errorMessages.PHONE_FORMAT
+    )
+);
 defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
 defineRule(
     "email-address-format",
@@ -99,20 +106,6 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    setup(props) {
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
-            props.validationRules,
-        );
-
-        return {
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-        };
-    },
     data() {
         return {
             techNotes: "",
@@ -124,15 +117,10 @@ export default {
             type: Object,
             default: () => ({
                 customerQuestions: {
-                    addressQuestions: {
-                        streetAddress: "",
-                        city: "",
-                        state: "",
-                        zipCode: "",
-                    },
                     firstName: "",
                     lastName: "",
                     emailAddress: "",
+                    phoneNumber: "",
                 },
             }),
         },

src/styles/common-error-styles.scss

@@ -102,7 +102,8 @@ html {
             }
         }
         &.textbox-question,
-        &.dropdown-question {
+        &.dropdown-question,
+        &.phonenumber-question {
             p {
                 color: $red;
             }