Pantheon Community

How do I make my phone number field automatically apply dashes?

Hello,

I’m creating a webform that has a phone number field on it. I already have it so the field will not accept a number without dashes. But how do I get the phone number field to automatically apply dashes when a number is entered?

The code for my phone number field looks like this:


what_is_a_number_we_may_contact_you_at_:
#type’: tel
#title’: ‘What is a number we may contact you at? (Format: xxx-xxx-xxxx)’
#pattern’: ‘^|^[0-9]{3}-[0-9]{3}-[0-9]{4}
#pattern_error’: ‘Format: 555-555-5555’


Does anyone know what extra code I could add to it to automatically apply dashes, and where in the code above would I add that extra code? Any advice is appreciated.

2 Likes

Do you want the telephone number to automatically have dashes on screen while a person enters their information into the form or do you want to apply those dashes after they’ve submitted the form and you’re processing/validating their entries?

1 Like

I want the number to automatically have the dashes added to it while the person enters it. The current form works fine, but I’ve seen some forms that simply add the dashes automatically as the number gets typed out, and I was hoping that would be possible with Drupal 8.

1 Like

It’s JavaScript, so it should be possible to add it with Drupal 8 or anything else. The technique is called “input masking.” There’s a bunch of options for it out there, so it’s probably a matter of looking around and seeing which one is best for your setup.

2 Likes

Yes, just like @dashifen suggested as well. I did find this: https://www.drupal.org/forum/support/post-installation/2018-10-09/formatting-and-validating-phone-numbers

Might be worth looking over as well not sure if that would fully help but at least it is a possible way of going about it too.

2 Likes

Could you give me some direction? I tried downloading a plugin for Input Masking for drupal 8 but it’s not really able to accomplish what I’m trying to do. When I look into the code for it, it isn’t very clear how I can fit this into the code of the contact form. Is there a specific method that we know will work? I’m not finding a lot of resources on how to do Input Masking through drupal or pantheon.

Last time I did this, it was with this jQuery plugin: GitHub - RobinHerbots/Inputmask: Input Mask plugin. That page provides some information on how to set that specific solution up, but it isn’t as straightforward as installing a plugin, typically. Once you add the input masking JavaScript library to your site’s codebase, you have to write additional JavaScript that uses that library to produce the masking you want.

So, the steps would likely be (1) identify the library you want to use, (2) install it, (3) write your own JavaScript that uses the library to produce the masking that you want. It’s possible that the Drupal module that you installed might have handled 1 and 2, but you might still need to do 3.

Aaaahhh okay I was able to figure out what the issue was. I successfully downloaded, installed, and enabled the input mask module, but for whatever reason the module does not show up for telephone fields, only text fields. So I just made my telephone field a test field and implemented the input mask that way, but thank you for the assistance, it gave me some good insight.