Phone input mask

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

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:

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

2 Likes

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

@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.

@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