Forums

Phone Number Validation and Mask

baxterdown 27 Jul, 2019
Hello everyone,

First time using CFv6! In v5 I always added the following mask for phone number fields:
data-inputmask='mask' : '999-999-9999'
type=tel
To validate I would make the field required and checked phone number in the validation tab.

I found a thread with a CFv6 phone mask so I changed the code to mirror that with the colon instead of equal sign:
data-inputmask:'mask' : '999-999-9999'
type=tel
The mask does display ok, but it's not working correctly, as follows:

- The field loses it's formatting on the front end and becomes at small box
- Turning on phone number makes the field impossible to submit (I suspect because phone is tied to the mask integrated in the form, which has 1+ before the number (we don't use that format here in the US)
- The type=tel which tells mobile devices to bring up the number keypad doesn't work

Here's a link to the form: http://cslftlauderdale.org/new/contact

Thanks in advance for your help!

Jose

EDIT: Not sure how I tagged Connectivity. This post is for Chronoforms v6
healyhatman 27 Jul, 2019
If you're using a custom mask, don't turn on any "mask" option in the validation tab.
baxterdown 27 Jul, 2019
No mask options are turned on. The mask is off because the CF mask option requires the phone number to be entered as +9(999)-9999. We don't use that phone format in the US.
healyhatman 28 Jul, 2019
type=tel should also be type:tel
baxterdown 28 Jul, 2019
Thanks, that fixed the display issue. But the field can still be submitted without entering a full phone number. How do I set up validation so that a full number that looks like 555-555-1212 is entered? Right now, someone can enter 555-___-____ and the form will still submit.

Thanks

Jose
healyhatman 28 Jul, 2019
Use regex. Busy now can't make the pattern for you
baxterdown 28 Jul, 2019
No idea what is regex...
baxterdown 28 Jul, 2019
Answer
I got it! I did a little bit of research got a basic idea of what a regex is and what it should look like. Then found a regex checker at https://www.regextester.com/96623. I modified what was there and got it to work for me. I'm posting my regex below in case it can help someone in the future:

REGEX
/[0-9]{3}\-[0-9]{3}\-[0-9]{4}/g

PHONE FORMAT
555-555-5555

I'm all set.

Jose
This topic is locked and no more replies can be posted.