error messages for license plate and zip input, start of validation rules

This commit is contained in:
Kroell 2023-01-03 11:11:33 -05:00
parent 2a2df2b276
commit 928f9fd4c1

View file

@ -15,7 +15,8 @@
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
disableAutoFill />
disableAutoFill
validationRules="license-plate-required" />
</div>
<div class="mt-4">
<textboxQuestion
@ -23,12 +24,14 @@
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
isRequired
disableAutoFill />
disableAutoFill
mask="#####"
validationRules="zip-required|zip-format"/>
</div>
<alert
<!-- <alert
cmsWidgetName="AlertVinNotFoundWidget"
alertClass="alert-danger"
:isDismissable="false" />
:isDismissable="false" /> -->
<siteFooter
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
@ -51,6 +54,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 { required, regex } from '@/helpers/validation-rules';
import { defineRule } from 'vee-validate';
import { errorMessages } from '@/constants/error-messages';
// 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.SERVICE_ZIP_FORMAT));
export default {
name: 'license-plate-lookup',
@ -65,10 +76,10 @@ export default {
alert,
},
data() {
return {
licensePlate: this.getLicensePlateFromStore(),
registrationZipCode: this.getRegistrationZipFromStore(),
};
// return {
// licensePlate: this.getLicensePlateFromStore(),
// registrationZipCode: this.getRegistrationZipFromStore(),
// };
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -87,6 +98,9 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
props: {
validationRules: String,
},
computed: {
isForwardActionDisabled() {
return true;
@ -111,12 +125,12 @@ export default {
resetDependentState() {
},
getLicensePlateFromStore() {
return this.mainStore.order.vehicle.registration.licensePlate;
},
getRegistrationZipFromStore() {
return this.mainStore.order.vehicle.registration.zipCode;
}
// getLicensePlateFromStore() {
// return this.mainStore.order.vehicle.registration.licensePlate;
// },
// getRegistrationZipFromStore() {
// return this.mainStore.order.vehicle.registration.zipCode;
// }
},
};