How to use pattern for phone number in an html input?

Question

I'm trying to use pattern instead of regex in my code where the number must start with 09 and has a limit of 11 but most I see are regex and pattern inside the form are few but doesn't seem to work like this one that I found which is from an old video. How should I fix it?

<input class="form-design" name="phone" type="number" id="phone" pattern="(09)[0-9]{11}" placeholder="Phone Number*" required="">

Answer 1

You can try this:

<input class="form-design" name="phone" id="phone" pattern="^09[0-9]{9}$" placeholder="Phone Number*" required="">

Because you're defining a pattern for this tag you shouldn't use type=number.

^09[0-9]{9}$ means from the beginning to the end of the input it should start with 09 and after that, it should contain (11 -2 = 9) other numbers.