diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index a5d3a422..33e202fc 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -13,11 +13,23 @@ - - + + isRequired + disableAutoFill + inputId="zip" + validationRules="zip-required|zip-format" + class="mt-4" + /> // Import Supporting Files import { computed } from 'vue'; -import { endpoints } from '@/constants/endpoints'; import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { settleAllPromises } from '@/helpers/layout-helper'; import { useMainStore } from '@/store'; +import { defineRule } from 'vee-validate'; +import { regex, required } from '@/helpers/validation-rules'; +import { errorMessages } from '@/constants/error-messages'; // Import Component import baseFormMixin from '@/mixins/base-form-mixin'; @@ -45,10 +59,14 @@ import siteHeader from '@/common-components/site-header/site-header.vue'; import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue'; import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue'; import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue'; -import licensePlateQuestion from '@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue'; -import zipQuestion from '@/layouts/license-plate-lookup/zip-question/zip-question.vue'; import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue'; +// Define Validation Rules +defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED)); +defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED)); +defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT)); + + export default { name: 'license-plate-lookup', mixins: [baseFormMixin], @@ -59,8 +77,6 @@ export default { siteSubHeader, vehicleBanner, textboxQuestion, - licensePlateQuestion, - zipQuestion, licensePlateLookupAlerts }, setup() { diff --git a/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue b/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue deleted file mode 100644 index 3757518d..00000000 --- a/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/zip-question/zip-question.vue b/src/layouts/license-plate-lookup/zip-question/zip-question.vue deleted file mode 100644 index 4af9a5b2..00000000 --- a/src/layouts/license-plate-lookup/zip-question/zip-question.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index d5f1bbf3..bbb214e8 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -239,7 +239,7 @@ export const useMainStore = defineStore({ endpoint: endpoints.LookupVinByPlate.url, payload: { licensePlate: licensePlate, - licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store + licenseState: "IL", // hard coded until Welcome Page is complete and license state can be pulled from store }, });