I have an input for phone numbers (text, just like in “account” when creating a project) but how do I display the phone number correctly? , i.e. in a profile page. It would be nice to have the input look correct when the user is inputting the number and also when it is displayed.
I see the regex option but haven’t figured that out yet (if that is even the way to do it).
I don’t know if anything has occurred after this post:
Input elements has limited input types. We need: Email, Password, Phone Number (not just US). By this, I’m not referring to the database, but in the builder (front-end).
I did try this, but then you got to use conditionals to limit the input to 3 numbers for area code, 3 numbers for first part and 4 numbers for last part - unless there are other options.
Do you really need to separate the phone number into three modules for interaction? Because the structure and length of phone numbers are not fixed across different countries/regions, it is difficult to restrict them with a single general rule. You might need to add multiple regular expressions and connect them with OR conditions.
Of course, if you want to enumerate common rules for specific scenarios, that is possible, although it will be more complicated. However, the basic workflow is similar to the one described below.
First, for the initial area code (country calling code), I recommend creating a data model to store all the area codes and using a data selector component bound to this data.
Next, for the subsequent input field’s regex matching, I suggest using only one text input component. In the On change action of this input component, add a Conditional action. Select Regex match for the expression and fill in your required regular expression(s).
Then, add a page variable named is_matched to manage the fulfillment status. When the conditional check in the text input component’s On change action is not met, set the page variable’s status to false; when it is met, set it to true.
Finally, in all places that depend on the content of the input field, use conditional actions to execute different logic, such as is null, is_not_matched, or matched.
Lastly, there is a built-in validation feature in the actions panel, which should be called ‘Add Validation’, but it is limited to modification actions (like insert or update). If you want to validate on similar actions, you could potentially use that.
The entire logic flow and the number of variables you need to manage will be quite high, but this is hard to avoid. I hope this answer is helpful to you.
