CODEWITHSUNDEEP
javascripthtmlregexvalidationinput
Gopal Singh
Gopal Singh

Reputation: 1133

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

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.

Upvotes: 1

Views: 1265

Answers (3)

shubham agrawal
shubham agrawal

Reputation: 3541

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.

Upvotes: 0

Ilya Gazman
Ilya Gazman

Reputation: 32231

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

Upvotes: 0

Rajesh
Rajesh

Reputation: 24925

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.

Upvotes: 1

Related Questions