How can we set a pattern for a phone number with css

Question

I'm creating a shopify app and using xo booking system for bookings but couldn't set pattern. Is there a way to add pattern with css? or what should be min and max for 10 digit phone number and out of range text.

i tried several values for min and max but doesn't work . Any help would be appreciated.

Please provide enough code so others can better understand or reproduce the problem. — Community, Jun 20 '23 at 01:53

score 0 · Answer 1 · edited Jun 21 '23 at 01:28

0

You must use JavaScript for this. But you can use the pattern attribute in HTML. For example, in the code below, the user can submit the form only when the entered number is ten digits.

<input type="tel" pattern="^[0-9]{10}$" required>

NOTE: This only prevents users from submitting invalid values on the frontend, all data submitted by an external source should always be validated on the backend as well.

edited Jun 21 '23 at 01:28

Federico Fusco

545
1
5
18

answered Jun 19 '23 at 01:26

Mahdi

1
2

Thank you . I cannot change code as it’s issue with shopify app and it doesn’t allow to change code . – Ripenpreet Kaur Jun 20 '23 at 02:02

How can we set a pattern for a phone number with css

1 Answers1