Allow only number digits in input type regex. issue is i am able to type this(1.) , want to prevent it

Question

MY CODE

function validate(e, id) {
  var reg = new RegExp('^\\d+$');
  if (reg.test($("#" + id).val())) {
    var value = $("#" + id).val();
    alert(value);
  } else {
    alert("fail");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input name="input-type" type="number" id="number-input" oninput="validate(event,'number-input');">

This accept 1.(dot after any digits) value rest all is good.

@WiktorStribiżew event.charCode fails in many devices like Samsung.In Samsung many keys has 443 charCode. Don't want to use this option. — Gopal Singh, Mar 20 '17 at 12:20
@GopalSingh Can you use `event.key` on `keypress` or `keyup` to detect the dot and prevent the event (or remove the dot)? May make up such solution for you. — ilyaigpetrov, Mar 20 '17 at 13:38

score 1 · Answer 1 · edited May 23 '17 at 12:25

You can try using <input type="tel" ...>. This way when user types 1. you will receive 1. only and not 1 and it will also open number keypad on mobile.

function validate(e, id) {
  var reg = /^[0-9]*(\.(?=[0-9]+))*[0-9]+$/;
  var value = $("#" + id).val();
  if (reg.test(value)) {
    console.log(value);
  } else {
    console.log("fail");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input name="input-type" type="tel" id="number-input" oninput="validate(event,'number-input');">

You can also refer to How to get the raw value an <input type="number"> field? for more information in why 1. returns 1 and not 1.

shubham agrawal · Answer 2 · 2017-03-21T12:33:56.643

0

Here is a code that might help you.In the below code when the user types . it is replaced by null.It only accepts digits.This is for input type="text".The variable currValue has the value of the input.

The search() method searches a string for a specified value, and returns the position of the match.The search value can be string or a regular expression.This method returns -1 if no match is found.

Then I am using .replace()

The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced.

Here I am replacing it with null if the regex doesn't match.The regex [^0-9] checks if not digit.

JSFIDDLE

Here is the code:

$(function() {
  $('input').bind('keyup', function(event) {
    var currValue = $(this).val();

    if (currValue.search(/[^0-9]/) != -1) {

      alert('Only numerical inputs please');
    }

    $(this).val(currValue.replace(/[^0-9]/, ''));
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<label>Digits Only:
  <input type="text" />
</label>
<br>
<br>

EDIT : In input type="number" we have to force it to always accept the updated val since many events does not work in it.So for that reason I have to update the existing value with the updated value after each event.

So I added

var v = $(this).val();
$(this).focus().val("").val(v);

So that each time the input is focused the value get updated with the existing value.

UPDATED FIDDLE FOR INPUT TYPE NUMBER

Updated snippet:

$(function() {
  $('input').bind('keyup input', function(event) {
    var v = $(this).val();
    $(this).focus().val("").val(v);

    var currValue = $(this).val();

    if (currValue.search(/[^0-9]/) != -1) {

      alert('Only numerical inputs please');
    }

    $(this).val(currValue.replace(/[^0-9]/, ''));
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Digits Only:
  <input type="number" />
</label>
<br>
<br>

EDIT 2 : For special case + and -.I think its a bug I am not sure but check the below snippet.It works for all the cases.Hope it helps.

FINAL FIDDLE

$(function() {
  $('input').bind('keyup', function(event) {
    var v = $(this).val();
    $(this).focus().val("").val(v);
    var currValue = $(this).val();
    $(this).val(currValue.replace(/[^0-9]/, ''));
    alert(v);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Digits Only:
  <input type="number" name="test" min=0 save="" oninput="validity.valid ? this.save = value : value = this.save;">
</label>
<br>
<br>

Hope it helps.For any other doubt feel free to ask.

edited Mar 21 '17 at 12:33

answered Mar 20 '17 at 12:36

shubham agrawal

3,435
6
20
31

In a comment to my answer author says he wants numeric keyboard on mobile. – ilyaigpetrov Mar 20 '17 at 12:41
Yes @ilyaigpetrov right . I already know it works with type=" text" but I want number keyboard. – Gopal Singh Mar 20 '17 at 12:47
@shubhamagrawal nice trick, I think it's the answer. Remove old code, please. – ilyaigpetrov Mar 20 '17 at 13:45
@ilyaigpetrov don't know why I am not able to edit right now its giving some error.I will as soon as possible – shubham agrawal Mar 20 '17 at 13:49
@shubhamagrawal can you please explain the code. when I press + and - key the text got clear. – Gopal Singh Mar 21 '17 at 08:25
@GopalSingh check the explanation of the code.Hope this helps.For any other doubt feel free to ask. – shubham agrawal Mar 21 '17 at 10:23
No check the updated fiddle its working.Which browser are you using – shubham agrawal Mar 21 '17 at 10:40
I am using chrome but I will use this code for mobile application. – Gopal Singh Mar 21 '17 at 10:51
Its working I checked the code even on moblie. I am not sure why are you facing this error.Yesterday only I made sure that it supports all the device – shubham agrawal Mar 21 '17 at 11:15
@shubhamagrawal it's not working in both (when type + or - ) cases. – Gopal Singh Mar 21 '17 at 11:52
@GopalSingh check the final snippet.This will work under all the possible cases.Hope this solves the issue. – shubham agrawal Mar 21 '17 at 12:34
By this, there are many issues like when user enter dot or comma etc before entered text(.2131324 ) its shows focus issue. – Gopal Singh Mar 21 '17 at 13:05
@GopalSingh what focus issue are you talking about.Do you want it to loose focus if the input is wrong. – shubham agrawal Mar 21 '17 at 13:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138640/discussion-between-gopal-singh-and-shubham-agrawal). – Gopal Singh Mar 21 '17 at 13:09
@GopalSingh did you find a solution to your problem – shubham agrawal Mar 23 '17 at 11:27

score 0 · Answer 3 · answered Mar 20 '17 at 16:05

0

It work as fallow:

1   pass
1.  fail
1.1 pass

function validate(e, id) {
  var value = $("#" + id).val() + "";
  if (new RegExp('^[0-9]+\.[0-9]+$').test(value)
 || ((new RegExp('^[0-9]+').test(value) && !value.includes(".")))
) {
    var value = $("#" + id).val();
    alert($("#" + id).val() + "->" + value);
  } else {
    alert("fail " + $("#" + id).val());
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input name="input-type" type="text" id="text-input" oninput="validate(event,'text-input');">

answered Mar 20 '17 at 16:05

Ilya Gazman

31,250
24
137
216

Not working because I am using type="number" and can't change it to "text" – Gopal Singh Mar 21 '17 at 05:55
Is there any solution using type="number" – Gopal Singh Mar 21 '17 at 06:04
@GopalSingh nop, because when using type number, 1. will be converted to 1, you will never get the dot – Ilya Gazman Mar 21 '17 at 10:53
Thanks but still my requirement is same – Gopal Singh Mar 21 '17 at 11:27

Allow only number digits in input type regex. issue is i am able to type this(1.) , want to prevent it

3 Answers3