Add Mask to phone number fields in app

Prevents  1 and 0 from starting a phone number.
This commit is contained in:
Bill Richardson 2024-02-16 16:19:47 -05:00
parent 47a2a10e84
commit d85829f83e
3 changed files with 33 additions and 2 deletions

View file

@ -39,7 +39,7 @@
inputId="phoneNumberField" inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion" cmsWidgetName="PhoneNumberQuestion"
isRequired isRequired
mask="###-###-####" :mask="mask"
disableAutoFill disableAutoFill
:validationRules="rules.phoneNumber" /> :validationRules="rules.phoneNumber" />
<textboxQuestion <textboxQuestion
@ -175,6 +175,16 @@ export default {
}, },
canNavigateBack() { canNavigateBack() {
return canNavigateBackFromBailout(); return canNavigateBackFromBailout();
},
mask() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
} }
}, },
methods: { methods: {

View file

@ -46,6 +46,7 @@
inputId="phoneNumber" inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion" :cmsWidgetName="widget.phoneNumberQuestion"
isRequired isRequired
:mask="mask"
:validationRules="rules.phoneNumber" /> :validationRules="rules.phoneNumber" />
<checkbox <checkbox
ref="requestTextUpdatesCheckbox" ref="requestTextUpdatesCheckbox"
@ -179,6 +180,16 @@ export default {
*/ */
textUpdateDisclaimerText() { textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`; return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
},
mask() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
} }
}, },
methods: methods:

View file

@ -38,7 +38,7 @@
inputId="phoneNumber" inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion" :cmsWidgetName="widget.phoneNumberQuestion"
isRequired isRequired
mask="###-###-####" :mask="mask"
disableAutoFill disableAutoFill
:validationRules="rules.phoneNumber" /> :validationRules="rules.phoneNumber" />
</template> </template>
@ -101,6 +101,16 @@ export default {
}, },
footerButtonText() { footerButtonText() {
return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT); return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
},
mask() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
} }
}, },
methods: { methods: {