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?
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.
Amazing!! Thank you for that!
I also added maxlength to HTML attributes to stop the user from entering more digits.
That worked perfectly.
@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:
I cannot figure out how to access the target from inside this action for WeWeb.
Thanks.
@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 !
