From 8bd0df4917a1c3396014349b27b889ef225226bc Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 18 Mar 2022 08:56:39 -0400 Subject: [PATCH] Added some validation related stuff --- .../dropdown-question/dropdown-question.vue | 4 +- .../textbox-question/textbox-question.vue | 4 +- src/constants/error-messages.js | 7 ++ .../address-questions/address-questions.vue | 3 +- .../customer-questions/customer-questions.vue | 111 +++++++++--------- 5 files changed, 72 insertions(+), 57 deletions(-) diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue index 81812b72a..38cf15985 100644 --- a/src/common-components/dropdown-question/dropdown-question.vue +++ b/src/common-components/dropdown-question/dropdown-question.vue @@ -7,7 +7,8 @@ :name="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" - :aria-required="isRequired"> + :aria-required="isRequired" + :validationRules="validationRules" > @@ -33,6 +34,7 @@ export default { isDisabled: Boolean, isRequired: Boolean, disableAutoFill: Boolean, + validationRules: String, }, data() { return { diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 14c881dce..18f2851c5 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -13,7 +13,8 @@ :disabled="isDisabled" :aria-required="isRequired" autocomplete="off" - :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" /> + :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" + :validationRules="validationRules" />

There has been an error!

@@ -45,6 +46,7 @@ export default { type: String, default: '', }, + validationRules: String, }, data() { return { diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index ba2b0e585..1fd2a77c2 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -7,6 +7,13 @@ const errorMessages = { WINDSHIELD_CHIP_COUNT_REQUIRED: "Please select chip(s)", WINSHIELD_REPLACE_OPTIONS_REQUIRED: "Please select windshield part", REPLACE_OPTIONS_REQUIRED: "Please select rear window type", + STREET_ADDRESS_REQUIRED: "Please enter your street address", + CITY_REQUIRED: "Please enter your city", + STATE_REQUIRED: "Please enter your state", + ZIP_REQUIRED: "Please enter your ZIP", + FIRST_NAME_REQUIRED: "Please enter your first name", + LAST_NAME_REQUIRED: "Please enter your last name", + EMAIL_ADDRESS_REQUIRED: "Please enter your email address", }; export { errorMessages }; \ No newline at end of file diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 936eb09b6..20dae6350 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -55,7 +55,8 @@ export default ({ state: "", zip: "", }), - }, + }, + validationRules: String, }, setup(props, { emit }) { const addressModel = computed({ // Use computed to wrap the object diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue index 27a7e5486..c50be3405 100644 --- a/src/layouts/address-lookup/customer-questions/customer-questions.vue +++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue @@ -24,62 +24,65 @@ import { computed } from 'vue'; //import store from "@/store"; export default ({ - name: "customer-questions", - emits: ['update:modelValue'], // The component emits an event - props: { - modelValue: { - type: Object, - default: () => ({ - customerQuestions: { - addressQuestions: { - streetAddress: "", - city: "", - state: "", - zip: "", - }, - firstName: "", - lastName: "", - emailAddress: "", - } - }), - } - }, - data(){ - return { - - } - }, - setup(props, { emit }) { - const customerModel = computed({ // Use computed to wrap the object - get: () => props.modelValue, - set: (value) => emit('update:modelValue', value), - }); - - return { customerModel }; - }, - methods: { - initializeComponent(cmsContent){ - // pass alert texts to addressQuestions component - this.$refs.addressQuestions.initializeComponent(cmsContent); - - this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText); - this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText); - this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText); - } - }, - computed: { - value: { - get: function() { - return this.modelValue; + name: "customer-questions", + emits: ['update:modelValue'], // The component emits an event + props: { + modelValue: { + type: Object, + default: () => ({ + customerQuestions: { + addressQuestions: { + streetAddress: "", + city: "", + state: "", + zip: "", }, - set: function(newValue) { - this.$emit("update:modelValue", newValue); - } - }, + firstName: "", + lastName: "", + emailAddress: "", + } + }), }, - components: { - addressQuestions, - textboxQuestion, + validationRules: String, + }, + data() { + return { + } + }, + setup(props, { emit }) { + // Please do not modify, this "computed" is used to track and report + // this object's property changes to the parent component + const customerModel = computed({ // Use computed to wrap the object + get: () => props.modelValue, + set: (value) => emit('update:modelValue', value), + }); + + return { customerModel }; + }, + methods: { + initializeComponent(cmsContent){ + // pass alert texts to addressQuestions component + this.$refs.addressQuestions.initializeComponent(cmsContent); + + this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText); + this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText); + this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText); + } + }, + computed: { + value: { + get: function() { + return this.modelValue; + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + }, + }, + components: { + addressQuestions, + textboxQuestion, + } }) \ No newline at end of file