html input pattern for phone number

Question

I need a patter like this [ 081 222 2224 ] with digits limit of 10 .. This is my try

    <form action="" method="post" id="cusCreate" autocomplete="off">
      <input type="tel" name="telphone"  pattern="[0-9]{10}"  title="Ten digits code" required/>    
      <label style="font-size:9px;padding-left:20px"> Eg : 081 222 2224  </label> 
      <input type="submit" value="Submit"/>
   </form>

http://jsfiddle.net/hbmhjt0r/

what's the problem, you want a better regex, do you have more constraints? — Kristijan Iliev
– Kristijan Iliev, Commented Oct 2, 2015 at 6:10
i need spaces between the digits like i shown above [081 222 2224] — Nasik Ahd
– Nasik Ahd, Commented Oct 2, 2015 at 6:18
don't use type "tel". Only safari supports it. Nobody uses Safari... — Mathieu Turcotte
– Mathieu Turcotte, Commented Jun 13, 2018 at 15:00

user1527246 · Accepted Answer · 2015-10-02 06:55:51Z

19

you can achieve your result with below changes in your code::

<form action="" method="post" id="cusCreate" autocomplete="off">
      <input type="tel" name="telphone" placeholder="888 888 8888" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" maxlength="12"  title="Ten digits code" required/>    
      <label style="font-size:9px;padding-left:20px"> Eg : 081 222 2224  </label> 
      <input type="submit" value="Submit"/>    </form>

For your reference click here

JSFiddle Demo

answered Oct 2, 2015 at 6:55

user1527246

Sign up to request clarification or add additional context in comments.

4 Comments

Neel Over a year ago

I think you have not checked in chrome browser, still it's working fine in firefox. good work

Edalat Feizi Over a year ago

thank you for this solution but user can enter characters like "somthing" inside input

Gendrith Over a year ago

Thank you, even though "tel" is not a standard bye itself, the pattern works perfectly

Tom M Over a year ago

@Gendrith it is though

RoastBeast · Accepted Answer · 2022-12-14 05:17:29Z

6

pattern="[0-9]{3} [0-9]{3} [0-9]{4}"

This requires the user to put in spaces like this 012 345 6789. If you want the spaces to be added automatically you should add javascript to the onchange of the input. Add onchange="this.value=addSpaces(this.value);" to the input and see if it works:

function addSpaces(initial){
    initial.replace("/([0-9]{3})/","\1 ");
    initial.replace("/[0-9]{3} ([0-9]{3})/","\1 ");
    return initial;
}

edited Dec 14, 2022 at 5:17

RoastBeast

1,1273 gold badges24 silver badges41 bronze badges

answered Oct 2, 2015 at 6:24

x13

2,2571 gold badge15 silver badges27 bronze badges

Comments

Suraj Rao · Accepted Answer · 2021-02-21 11:23:32Z

4

Those from Nigeria we use phone:

new FormControl('', [Validators.required, Validators.pattern('^(080|091|090|070|081)+[0-9]{8}$')])

edited Feb 21, 2021 at 11:23

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Feb 21, 2021 at 11:16

Sirjiskit

7011 gold badge9 silver badges18 bronze badges

1 Comment

tobybot Over a year ago

upvote because devs working with international phone numbers need to remember that patterns can be very different!

Hakan · Accepted Answer · 2021-02-21 11:11:49Z

0

Not US but change accordingly:

function phoneMask() { 
    var num = $(this).val().replace(/\D/g,''); 
    $(this).val(
        0 + '(5' + num.substring(2,4) 
        +(num.length>4?')':'') 
        +(num.length>4?' '+num.substring(4,7):'') 
        +(num.length>7?' '+num.substring(7,9):'') 
        +(num.length>9?' '+num.substring(9,11):'') 
    );
}
$('[type="tel"]').keyup(phoneMask);

answered Feb 21, 2021 at 11:11

Hakan

7127 silver badges8 bronze badges

Collectives™ on Stack Overflow

html input pattern for phone number

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related