CODEWITHSUNDEEP
htmlinput
Nasik Ahd
Nasik Ahd

Reputation: 798

html input pattern for phone number

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/

Upvotes: 11

Views: 138586

Answers (4)

x13
x13

Reputation: 2227

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;
}

Upvotes: 6

Sirjiskit
Sirjiskit

Reputation: 659

Those from Nigeria we use phone:

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

Upvotes: 3

Hakan
Hakan

Reputation: 589

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);

Upvotes: 0

user1527246
user1527246

Reputation:

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

Upvotes: 19

Related Questions