error messages for license plate and zip input, start of validation rules
This commit is contained in:
parent
2a2df2b276
commit
928f9fd4c1
1 changed files with 28 additions and 14 deletions
|
|
@ -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;
|
||||
// }
|
||||
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue