How I use Regex pattern in HTML text input to validate phone number

Question

My number format as shown in the below:

1. 775645645 (9 digits)

2. 0775645645 (10 digits)

3. +94775645645

The numbers can start with 7 or 0 or +94.

So I tried it with regex pattern in HTML text input as shown in the below:

<input type="text" name="mobile" class="form-control" pattern ="(?:7|0|(?:\+94))[0-9]{9,10}$" required />

But this pattern is not working for me. Appreciate your help.

UPDATE:

Here Im using jQuery validate to validate a front end form.

You start by matching one character (7 or 0), then you should only match 8 or 9 digits at the end to get a total of 9 to 10. — Poul Bak, Apr 21 '22 at 14:45
Does this answer your question? [How to validate phone numbers using regex](https://stackoverflow.com/questions/123559/how-to-validate-phone-numbers-using-regex) — Andy Lester, Apr 21 '22 at 19:51
You must post the code, else, you will attract even more downvotes. — Wiktor Stribiżew, Apr 21 '22 at 20:08

Wiktor Stribiżew · Answer 1 · 2022-04-21T14:57:38.667

1

You can use

pattern="(?:7|0\d|\+94\d)\d{8}"

See the regex demo. It will be compiled into a pattern like ^(?:(?:7|0\d|\+94\d)\d{8})$ and will match

See the demo below:

input:valid {
  color: navy
}
input:invalid {
  color: red;
}

<form>
  <input type="text" name="mobile" class="form-control" pattern="(?:7|0\d|\+94\d)\d{8}" required />
  <input type="Submit"/>
</form>

edited Apr 21 '22 at 14:57

answered Apr 21 '22 at 14:43

Wiktor Stribiżew

Thanks for quick responce. But it doesn't works for me. That mean when I add incorrect information into the text field its not validate and I can submit the form. Sir, may I know is there anything do I miss? – user3733831 Apr 21 '22 at 14:52
@user3733831 You cannot submit invalis input, see my demo. – Wiktor Stribiżew Apr 21 '22 at 14:57
Yes Sir, I checked your demo, its working perfectly. But in my case I can submit the form with invalid input.. – user3733831 Apr 21 '22 at 15:05
Sir, There was one more thing I could not say when asked the question. Here Im using [jQuery validate](https://jqueryvalidation.org/) to validate a front end form. Probably it would be the issue.. – user3733831 Apr 21 '22 at 15:15
@user3733831 then please provide a codepen to repro. – Wiktor Stribiżew Apr 21 '22 at 16:41

score 1 · Answer 2 · answered Apr 21 '22 at 15:02

1

Can try this hope it helps

input:not(:placeholder-shown):invalid{
  background-color:pink;
  box-shadow:0 0 0 2px red;
}

<input type="text" name="mobile" class="form-control" placeholder="Phone number" pattern ="(7[0-9]{8}|0[0-9]{9}|\+94[0-9]{9})$" required />

answered Apr 21 '22 at 15:02

Diki Agustin

1

Thank you for your answer. This is also having issue with [jQuery validate](https://jqueryvalidation.org/) plugin. – user3733831 Apr 21 '22 at 15:20

Zigfrida · Answer 3 · 2022-04-21T19:40:52.753

0

If you are looking for a regex pattern that only works for your examples try this:

(?:(?:7|0[1-9]{1})|(?:\+94))[0-9]{8}

If you are looking for a pattern that could work for a wide range of phone number patterns, you could try this:

^[+]?[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$

How this works:

^ represents the beginning of the string
[+]? for phone numbers that include "+" at the beginning
[(]{0,1} represents the opening " ( ". For phone numbers that include (###). Example: (222)333-333
[0-9]{1,4} represent the number in between the "(###)"
[)]{0,1} represent the closing ")"
[-\s\./0-9]* this will allow phone numbers to be accepted even if the numbers are divided using "-" or " " or "."
$ represents the end of the string

edited Apr 21 '22 at 19:40

answered Apr 21 '22 at 14:45

Zigfrida

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – gre_gor Apr 21 '22 at 17:56
Also this regex doesn't seem to do what OP wants. Yours also match `+0`, `(0)`, etc. Seems you just posted a regex for a phone number, ignoring OP's requirements. – gre_gor Apr 21 '22 at 18:00

3 Answers3