# Phone input mask
**URL:** https://community.weweb.io/t/phone-input-mask/523
**Category:** Ask us anything
**Created:** [May 11, 2022, 4:10am UTC](https://community.weweb.io/t/phone-input-mask/523 "2022-05-11T04:10:25Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [May 11, 2022, 4:10am UTC](https://community.weweb.io/t/phone-input-mask/523/1 "2022-05-11T04:10:26Z")
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?
---
### Author:  [@Marc](https://community.weweb.io/u/Marc)
#### Post date: [May 11, 2022, 12:25pm UTC](https://community.weweb.io/t/phone-input-mask/523/2 "2022-05-11T12:25:16Z")
Hi Kevin!
You can do it using some Javascript 🙂
- 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 😉
**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.
---
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [May 11, 2022, 12:56pm UTC](https://community.weweb.io/t/phone-input-mask/523/3 "2022-05-11T12:56:48Z")
Amazing!! Thank you for that!
I also added maxlength to HTML attributes to stop the user from entering more digits.
That worked perfectly.
---
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [May 16, 2022, 3:12am UTC](https://community.weweb.io/t/phone-input-mask/523/4 "2022-05-16T03:12:34Z")
@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.
---
### Author:  [@Marc](https://community.weweb.io/u/Marc)
#### Post date: [May 16, 2022, 3:37pm UTC](https://community.weweb.io/t/phone-input-mask/523/5 "2022-05-16T15:37:55Z")
@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 !
---
### Author:  [@Marc](https://community.weweb.io/u/Marc)
#### Post date: [May 19, 2022, 2:56pm UTC](https://community.weweb.io/t/phone-input-mask/523/6 "2022-05-19T14:56:13Z")
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”);`
---
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [May 19, 2022, 6:03pm UTC](https://community.weweb.io/t/phone-input-mask/523/8 "2022-05-19T18:03:10Z")
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.
---
### Author:  [@Joyce](https://community.weweb.io/u/Joyce)
#### Post date: [May 19, 2022, 6:25pm UTC](https://community.weweb.io/t/phone-input-mask/523/9 "2022-05-19T18:25:53Z")
nice! thanks for sharing this, Kevin 😀
---
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [June 29, 2022, 3:47pm UTC](https://community.weweb.io/t/phone-input-mask/523/10 "2022-06-29T15:47:38Z")
@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:
> **[Editor - WeWeb | - 29 June 2022](https://www.loom.com/share/8d29d4d227474aa9939b286f15a88e4f)**
---
### Author:  [@Joyce](https://community.weweb.io/u/Joyce)
#### Post date: [June 30, 2022, 4:10pm UTC](https://community.weweb.io/t/phone-input-mask/523/11 "2022-06-30T16:10:49Z")
Hi @kevinwasie 👋
Quick note to let you know I’ve seen this 🙂
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 🙂
---
### Author:  [@kevinwasie](https://community.weweb.io/u/kevinwasie)
#### Post date: [June 30, 2022, 7:14pm UTC](https://community.weweb.io/t/phone-input-mask/523/12 "2022-06-30T19:14:24Z")
Thank you @Joyce