How to restrict user to type 10 digit numbers in input element?

Question

I want to create a input field for phone number. I am creating input field using JavaScript dynamically.

<input type="text" id="phone" name="phone">

How to restrict users to type only 10 digit numbers in order to get a phone number.

Answer 1

try this

<input type="text" name="country_code" title="Error Message" pattern="[1-9]{1}[0-9]{9}"> 

This will ensure

1. It is numeric
2. It will be max of 10 chars
3. First digit is not zero

Answer 2

Use maxlength

<input type="text" maxlength="10" />

Answer 3

You can use maxlength to limit the length. Normally for numeric input you'd use type="number", however this adds a spinny box thing to scroll through numbers, which is completely useless for phone numbers. You can, however, use the pattern attribute to limit input to numbers (and require 10 numbers too, if you want):

<input type="text" maxlength="10" pattern="\d{10}" title="Please enter exactly 10 digits" />

Answer 4

Well I have successfully created my own working answer.

<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">

as well as

    <script>        
           function phoneno(){          
            $('#phone').keypress(function(e) {
                var a = [];
                var k = e.which;

                for (i = 48; i < 58; i++)
                    a.push(i);

                if (!(a.indexOf(k)>=0))
                    e.preventDefault();
            });
        }
       </script>

Answer 5

Add a maxlength attribute to your input.

<input type="text" id="phone" name="phone" maxlength="10">

See this working example on JSFiddle.

Answer 6

HTML

<input type="text" name="fieldName" id="fieldSelectorId">

This field only takes at max 10 digits number and do n't accept zero as the first digit.

JQuery

jQuery(document).ready(function () {
      jQuery("#fieldSelectorId").keypress(function (e) {
         var length = jQuery(this).val().length;
       if(length > 9) {
            return false;
       } else if(e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
       } else if((length == 0) && (e.which == 48)) {
            return false;
       }
      });
    });

Answer 7

use a maxlength attribute to your input.

<input type="text" id="phone" name="phone" maxlength="10">

See the fiddle demo here Demo

Answer 8

$(document).on('keypress','#typeyourid',function(e){
if($(e.target).prop('value').length>=10){
if(e.keyCode!=32)
{return false} 
}})

Advantage is this works with type="number"

Answer 9

This is what I use:

<input type="tel" name="phoneNumber" id="phoneNumber" title="Please use a 10 digit telephone number with no dashes or dots" pattern="[0-9]{10}" required /> <i>10 digits</i>

It clarifies exactly what is expected in the entry and gives usable error messages.

Answer 10

whereas you could use maxLength on the input, and some javascript validation, it will still be necessary to do server side validation anyway.

Answer 11

HTML

<input type="text" id="youridher" size="10">

Use JQuery,

SIZE = 10
$(document).ready(function() {
      $("#youridher").bind('keyup', function() { 
            if($("#youridher").val().length <= SIZE && PHONE_REGEX) {
                return true;
            }
            else {
                return false;
            }  
      });
});

Answer 12

maxlength restrict the number of digits which cannot be more than the desired digits but it accepts less than the desired digits. If mobile No maxlength="10" it will not accept 11 but may accept anything upto 10

Answer 13

Here all of the above outputs are giving a 10 digit number, but along with that the input field is accepting characters also, which is not the full solution. In order to set the 10 digit numbers only, we can use an input tag along with that type as number, and in that we can remove the up-down array by writing some small code in css which is shown below along with the input tag.

 <input name="phone" maxlength="10" pattern="[1-9]{1}[0-9]{9}" class="form-control" id="mobile"  placeholder="Enter your phone Number" type="number">


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

Answer 14

simply include parsley.js file in your document and in input element of mobile number enter this

data-parsley-type= "number" data-parsley-length="[10,10]" data-parsley-length-message= "Enter a Mobile Number"

you can change the message according to your requirement you also need to initialize parsley.js file in your document by writing

 <script type="text/javascript">

        $(document).ready(function() {
            $('form').parsley();
        });
    </script>   

---above code in your document.***

Answer 15

The snippet below does the job as expected!

<input type="text" name="AUS" pattern="[0-9]{10}" title="You can enter only 10 digits..." />


//type="text" <!-- always -->
//name="AUS" <!-- for Australia -->
//pattern="[0-9]{10}" <!-- 10 digits from 0 to 9 -->
//title="You can enter only 10 digits..." <!-- Pops a warning when input mismatches -->

Answer 16

How to set a textbox format as 8 digit number(00000019)

string i = TextBox1.Text;
string Key = i.ToString().PadLeft(8, '0');
Response.Write(Key);

Answer 17

  <input type="text" name='mobile_number' pattern=[0-9]{1}[0-9]{9}>

Answer 18

Please find below code if you want user to restrict with entering 10 digit in input control

<input class="form-control  input-md text-box single-line" id="ContactNumber" max="9999999999" min="1000000000" name="ContactNumber" required="required" type="number"  value="9876658688">

Benefits -

1. It will not allow to type any alphabets in input box because type of input box is 'number'

2. it will allow max 10 digits because max property is set to maximum possible value in 10 digits

3. it will not allow user to enter anything less than 10 digits as we want to restrict user in 10 digit phone number. min property in code is having minimum possible value in 10 digits so it will tell user to enter valid 10 digit value not less than that.

Answer 19

<label for="name" class="form-label" style="width:50%;">Mobile No:<input type="text" class="form-control" id="phone" name="mobile" pattern="\d{10}" title="Please enter exactly 10 digits" maxlength="10" required/></label>

This code will validate your contact form for non-numerical data entry. It will show an error message to the user when nonnumerical data is entered and fewer than 10 number is entered.

Answer 20

setInterval(function() {

  original = document.getElementById("displayResult").value;

  if (original.length > 10) {
    lastCharRemove =
      original.slice(0, original.length - 1);
    document.getElementById('displayResult').value = lastCharRemove;

  }
}, 100);

<input type="phone" placeholder="10 digit allowed" name="displayResult" id="displayResult" />

Answer 21

$(document).ready(function($) {  
  $("#tax_no").keypress(function (e) {
    var charCode = (e.which) ? e.which : e.keyCode;
    var length = $(this).val().length;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    if(length > 9) {
      return false;
    }

  });
});

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="nip_num" id="tax_no" />