How to use javascript to validate the input field for restricting numbers only and setting the range as maximum and minimum

Question

On event change the overflow value must get rejected.

I have an input box in my form, where I want to restrict the user to enter only the numbers between 0 and 99999 only. But I don't want to disable the tab button functionality. The below code is working fine for "NUMBERS only" but it won't allow to use Tab button as well. Also it's not checking the overflow condition if someone enters number bigger than 99999.

   <script>
      function myIdFunction() {
        var txt = "";
        if (document.getElementById("EmpId").validity.rangeOverflow) {
        txt = "Value too large";
        }
      document.getElementById("demo").innerHTML = txt;

      }
  </script>

  <input type="text" name="id" id="EmpId" ng-model="EmpId" max="99999"
   onchange="myIdFunction()" onkeypress="return IsNumeric(event);" 
   ondrop="return false;" onpaste="return false;" ng-disabled="!edit"    
   placeholder="EmpId" required>

   <span id="error" style="color: Red; display: none">* Input digits (0 -)</span>
   <script type="text/javascript">
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    function IsNumeric(e) {
        var keyCode = e.which ? e.which : e.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) ||
            specialKeys.indexOf(keyCode) != -1);
        document.getElementById("error").style.display = ret ? "none" : "inline";
        return ret;
    }
  </script>

I recommend you to put all your js script together, it's better formatting, and to give descriptive name to your functions. — AdminXVII
– AdminXVII, Commented Jun 17, 2015 at 18:14
Thanks @adminXVII, for your suggestion, but this was just a trial code. — Roumil That's Enough
– Roumil That's Enough, Commented Jun 17, 2015 at 19:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

`<input type=number min=0 max=99999>`

Brought to you by:

enter image description here

For the specification see:

WHATWG HTML, section 4.10.5.1.13

For supported browsers see:

For older browsers use:

number-polyfill

(A polyfill for implementing the HTML5 <input type=number> element in browsers that do not currently support it.)

Live enforcement of correct values

If you don't want the user to be able to enter incorrect values while typing:

var last = '';
input.addEventListener('input', function () {
  if (this.checkValidity()) {
    last = this.value;
  } else {
    this.value = last;
  }
});

See: DEMO.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 17, 2015 at 15:56

rsp

112k31 gold badges210 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roumil That's Enough Over a year ago

But sometimes it doesn't work properly. And I want to use the javascript only for this purpose.

Roumil That's Enough Over a year ago

The kind of input box, I want is that, a user should not be able to type more than the limit. But using this also, a user can type as much as he wants. I want to restrict the typing as well.

rsp Over a year ago

@RawCoder See my updated answer. I added code that does what you explained in the comment.

Roumil That's Enough Over a year ago

thanks for the your help @rsp . It's working exactly as I wanted.

Collectives™ on Stack Overflow

How to use javascript to validate the input field for restricting numbers only and setting the range as maximum and minimum

1 Answer 1

`<input type=number min=0 max=99999>`

Brought to you by:

Live enforcement of correct values

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

<input type=number min=0 max=99999>

Brought to you by:

Live enforcement of correct values

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

`<input type=number min=0 max=99999>`