Phone input mask

Ask us anything
1

Is there a simple way create a mask to ensure client input matches a phone number pattern, prior to submitting?

In the US it is something like (###)###-####

like this … (555)555-1234

I’ve tried using jquery, jasney, js function loaded in the header, etc etc…

I’ve run into problems with every solution.

I know that I can validate the pattern upon submission, but I want to do this sooner, as the user inputs data.

Example like this.

Is there a simple way to do this?

1 Like
2

Hi Kevin!

You can do it using some Javascript :slight_smile:

  • Add a workflow for “On change” on your phone input

  • Add a “Change variable value” action, select the value of your input

  • Set this code as Javascript :
    return event.value.replace(/^\(?(\d{3})\)?\s?(\d{3})\-?(\d+)$/, "($1) $2-$3");

This way when the user types something it will be formated the way you want :wink:

Capture d’écran 2022-05-11 142155
Capture d’écran 2022-05-11 1421551268×712 72.4 KB

Bonus :
If you want to ensure that the format is correct before submiting a form, you can add a an attribute to the phone input:
Name : pattern
Value : \([0-9]{3}\)\s[0-9]{3}-[0-9]{4}
The browser will prevent the submit event from happening.

Capture d’écran 2022-05-11 142242

3 Likes
3

Amazing!! Thank you for that!

I also added maxlength to HTML attributes to stop the user from entering more digits.

That worked perfectly.

2 Likes
4

@Marc Another question on this…

Is it possible to do this when the input element is being displayed inside of a collection?

Step 1 doesn’t work for me since It is not possible to have an action to Change Variable Value" since I cannot select the variable.

I’ve tried other javascript:

  • e.target.value = event.value.replace(/^(?(\d{3}))?(\d{3})-?(\d+)$/, “($1)$2-$3”);
  • event.currentTarget.value = event.value.replace(/^(?(\d{3}))?(\d{3})-?(\d+)$/, “($1)$2-$3”);
  • etc
  • etc

I cannot figure out how to access the target from inside this action for WeWeb.

Thanks.

5

@kevinwasie
You cannot access the dom element in the change workflows.
I’m working on adding the dom event to the workflows.
It should be available soon !

1 Like
6

Hi @kevinwasie
We made a small release to add the dom event to on change workflows.
You can use event.domEvent to access it.
To get the dom element you need to use event.domEvent.target

In your case, something like :
event.domEvent.target.value = event.domEvent.target.value.replace(/^(?(\d{3}))?(\d{3})-?(\d+)$/, “($1)$2-$3”);

1 Like
8

Thank You!

For anyone reading this later: I ended up realizing that I was able to get the element using document.getElementById(). I used the item.index to dynamically set the id of the element to something like “phone_#”. Since I have that index number in the workflow, JS was able to make the call, and then I used the .replace function like Marc talks about above.

1 Like
9

nice! thanks for sharing this, Kevin :grinning:

10

@mark @Joyce

This was working before, but now it appears that I cannot change what is displayed to the user in the input. Any ideas?

The mask changes the .value in JS, but it doesnt show up in the UI to the user:

11

Hi @kevinwasie :wave:

Quick note to let you know I’ve seen this :slight_smile:

It goes beyond my skill set and @Marc is super busy with a couple of big releases but we’ll do our best to get back to you asap. Might take a bit longer than usual :slight_smile:

12

Thank you @Joyce