HTML 5 phone number validation with pattern

Question

i want to validate the phone number in pakistan format by using html 5 with pattern attribute.

the valid pakistan phone number format is :

+92 345 1234567

but when i entered this in the input field then it show me the following error: please match the requested format

  <!DOCTYPE html>
<html lang="en-us">
<head>

    <title> Web Course </title>

</head>

<body>

     <form>


         Enter your phone number:
        <input type="text"  pattern="[+][0-9]{2}[][0-9]{3}[][0-9]{7}"  />



        <input type="submit" value="submit" />

    </form>

</body>
</html>

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Mar 24 '20 at 14:07

Sebastian Brosch · Accepted Answer · 2020-03-24T14:08:58.597

1

You can use one of the following solutions:

<form>
  Enter your phone number (with spaces):
  <input type="tel" pattern="[+][0-9]{2} [0-9]{3} [0-9]{7}">
  <input type="submit" value="submit">
</form>

<form>
  Enter your phone number (without spaces):
  <input type="tel" pattern="[+][0-9]{12}">
  <input type="submit" value="submit">
</form>

<form>
  Enter your phone number (with or without spaces):
  <input type="tel" pattern="[+][0-9]{2} ?[0-9]{3} ?[0-9]{7}">
  <input type="submit" value="submit">
</form>

edited Mar 24 '20 at 14:08

answered Mar 24 '20 at 14:00

Sebastian Brosch

42,106
15
72
87

1

You don't need to brackets in `[ ]`, the space alone is enough. Also you can use `?` instead of `{0,1}`: `"[+][0-9]{2} ?[0-9]{3} ?[0-9]{7}"` – RoToRa Mar 24 '20 at 14:03
Also you can use ? instead of {0,1}: "[+][0-9]{2} ?[0-9]{3} ?[0-9]{7} i did not get this ... what is the purpose of of question mark (?) here ? – Sami Malik Mar 24 '20 at 14:47
The ? indicates zero or one occurrences of the preceding element. In this case no space or one space but not two or more spaces. – Sebastian Brosch Mar 24 '20 at 15:17

HTML 5 phone number validation with pattern

1 Answers1