Predetermined mask for fields?

Hello, how can I format fields so that it fills a predetermined mask. For example, for telephone numbers, our default must be ### ### ## ##. How can I do that?

Do you mean you want to validate the user’s input against a pre-defined format?

Hello, I would like to have the fields formatted so that when someone enters a telephone number, for example 1234567890, it is automatically formatted as 123 456 78 90. That means that only 13 digits are possible with the empty lines and the spaces in the phone line inscribed

I assume you want to display it like that in your app as well and not just for the Sheet, so my proposal is as below:

  • Build a custom form:
  • Have a number entry to force the users to enter 13 digits. I think you can calculate a string’s length using Glide’s calculated column, so only when they do enter 13 digits will you allow them to submit.

  • Have 4 columns to slice the input into 4 parts, then finally add a template column to add those 4 parts plus the 3 spaces in (XXX XX XX XX).

2 Likes

Could you please elaborate more about how this should be implemted?
My usecase is a car license plate, which can have either 7 or 8 digits, as follows:
XX-XXX-XX
XXX-XX-XXX
I’d like the user to input just the numbers, but see them “prettified” to the license plate visual. I’ve seen it done in various sites when inputting credit card details, but I cannot find such an example now :slightly_frowning_face:

image


(Should be yellow background, as the first image)

I’ve found something similar here, but it doesn’t mask

I think it could be done with the standard glide columns. I think there is a plugin to count the number of characters, and then based on that count, use the slice plugin to chop the number up and piece it together in a template. But I think it would be a whole lot simpler to just pass it into a javascript column, have it count the characters, and maybe apply some regex or loop through and build a new string with the - injected. I’m at work, so can’t whip something up right now, but should be pretty easy.

Won’t this mean the user inputs on one field and see the prettified output in another?
I’d like it all to be in the same field, while they input.

Yes, that would be entry in one component and display bit in another component. Based on your screenshots with the license plate, I assumed that was your plan to make a prettified version.

But, no. I’m not aware of a way to do it directly in the entry component. Maybe something to play with using CSS, but I’m not sure if it would work.

I know what you mean when you say it should work like a credit card input experience, but no, it won’t work like that in Glide. You can theoretically have 2 or 3 entry components on the same row using CSS but it will be pretty cumbersome for you to configure all the logic for it to work (say only 2 numbers for the 1st entry, only 3 numbers for the 2nd entry etc.)

So if your concern is mostly on the front end side of things, I would recommend against this using Glide.

1 Like