Limit an input characters to just number

Question

I have an input in my form like this:

<div>
    <label for="phone">Phone Number:</label> <br />
    <input type="text" id="phone" name="phone" /> <br />
    <span id="phoneInfo" style="font-size: 11px;color:red;"></span>
</div>

and I want limit characters on this input and here is javascript code

var phone = $("#phone");
var phoneInfo = $("#phoneInfo");
function validatePhone(){
    var a = $("#phone").val();
    var filter = /^[0-9]$/;
    //it's valid
    if(filter.test(a) || message.val().length > 10){            
        phone.removeClass("error");
        phoneInfo.text("- thank you");
        phoneInfo.removeClass("error");
        return true;
    }
    //it's NOT valid
    else{
        phone.addClass("error");
        phoneInfo.text("X");
        phoneInfo.addClass("error");
        return false;
    }
}

but it doesn't work...

Define "*doesn't work*". – David Thomas Oct 31 '14 at 08:16 — David Thomas, Oct 31 '14 at 08:16

Bud Damyanov · Answer 1 · 2014-10-31T08:05:42.443

There are couple of way to achieve this, one of which includes the usage of jQuery plugin, called jQuery Validation. Below is an example code:

Example:

Makes “field” required and a US phone number.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a US phone number.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">

</head>
<body>
<form id="myform">
<label for="field">Required, us phone number: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});
</script>
</body>
</html>

However, if you do not want to use external plugins or JavaScript, you can rely on HTML 5 attribute type="number" (instead of type="text") of your input.

Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
   <form id="myform">
    <label for="phone">Phone Number:</label> <br />
    <input type="number" id="phone" name="phone" /> <br />
    <span id="phoneInfo" style="font-size: 11px;color:red;"></span>
  </form>
</div>
</body>
</html>

See here for details.

i need an error in Farsi language not in English, so i have to use java or php and i can't use HTML 5, thank you — , Oct 31 '14 at 10:59
You shouldn't use `type="number"` for values that require leading zeros (e.g., [international call prefixes](https://en.wikipedia.org/wiki/List_of_international_call_prefixes)) or should not allow `e` or `E`, as these are valid in number inputs. — Heretic Monkey, Oct 13 '22 at 14:33

Alain Tiemblo · Accepted Answer · 2014-10-31T10:56:20.987

0

You forgot the '+' in your filter:

var filter = /^[0-9]+$/;

Else you expect only 1 digit.

Also, you used an undefined variable:

message.val().length

I guess you wanted to use phone.

$('#validate').click(function() {
    var phone = $("#phone");
    var phoneInfo = $("#phoneInfo");
    var a = $("#phone").val();
    var filter = /^[0-9]+$/;
    //it's valid
    if (filter.test(a) && phone.val().length <= 10) {
        phone.removeClass("error");
        phoneInfo.text("- thank you");
        phoneInfo.removeClass("error");
        return true;
    }
    //it's NOT valid
    else {
        phone.addClass("error");
        phoneInfo.text("X");
        phoneInfo.addClass("error");
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <label for="phone">Phone Number:</label> <br />
  <input type="text" id="phone" name="phone" /> <br />
  <span id="phoneInfo" style="font-size: 11px;color:red;"></span>
  <input type="button" id="validate" value="Submit"/>
</div>

edited Oct 31 '14 at 10:56

answered Oct 31 '14 at 08:01

Alain Tiemblo

36,099
17
121
153

thank you, but this code accepts letters, for example if you type abcdefghijkl inside input, it returns thank you. – Oct 31 '14 at 09:42
ah never mind, i fix it. – Alain Tiemblo Oct 31 '14 at 10:04
thank you again, now it doesn't accept numbers for example when you type 01111111111 it returns X – Oct 31 '14 at 10:53
i fixed it to accept a number whose length is lesser or equals 10 chars. if you wish to accept greater or equal 10 chars, change the `phone.val().length <= 10` condition to `phone.val().length >= 10`. – Alain Tiemblo Oct 31 '14 at 10:59

score 0 · Answer 3 · answered Oct 31 '14 at 09:34

0

Try This code

 function phonenumber(inputtxt)  
    {  
      var phoneno = /^\d{10}$/;  
      if((inputtxt.value.match(phoneno))  
            {  
          return true;  
            }  
          else  
            {  
            alert("message");  
            return false;  
            }  
    }

answered Oct 31 '14 at 09:34

Ravi Sukhadia

443
6
16

thank you, but it gives an alert, like pop up window, but in this page i need page errors apear in self page http://farakhan.samincar.com/ – Oct 31 '14 at 11:02

score 0 · Answer 4 · answered Oct 31 '14 at 09:44

0

if You want to set character accept input box then you have to write just maxlength attribute of textbox... for Example...

<input type="text" maxlength="10" id="MobNo" name="MobNo" />

so input box accept only 10 characters.

answered Oct 31 '14 at 09:44

Raghu Goriya

78
1
10

i use this website in Farsi language, but in this way when you type 8 character number it shows an english language error, so i have to use java or php instead of html5 – Oct 31 '14 at 10:59

Limit an input characters to just number

4 Answers4