How to prevent a user from entering negative values in Html input

Question

I am using the following html input element for collecting the product quantity in Html page but the user can still go ahead and manually enter negative value. For example: I selected the the textbox and entered -100 and input field took it without complaining about it.

How can I prevent user from entering 0 and non-negative values in Html input element?

<input type="number" id="qty" value="" size="3" min="1" />

Check for it and prompt the user or display an error. There are many ways to do this — Huangism, Mar 09 '15 at 20:08
Are there any new features in Html5 that actually does this ? — Nital, Mar 09 '15 at 20:10
what you have is correct html5 and it should prevent negative values or zero... sadly not all the browsers support it http://caniuse.com/#search=number — Alvaro Montoro, Mar 09 '15 at 20:12
You can take a look at http://www.html5tutorial.info/html5-number.php for cross browser support, you would need some js — Huangism, Mar 09 '15 at 20:13
When you say the field took it, does that mean that you could unfocus the field and post the form? (Standard precaution applies: you need to validate the value on the server as well, since the entire form can be bypassed.) — Ulrich Schwarz, Mar 09 '15 at 20:31

score 8 · Accepted Answer · edited May 23 '17 at 12:03

Due to the <input type="number"> still not being widely well supported, you are still better off using a text input. Preventively you could disallow any characters which are not numbers with the keypress event and e.preventDefault(). However be sure that if you want to support legacy browsers (IE8-), there are a number of inconsistencies to take into account regarding returned key codes/ char codes. If you also want to disallow pasting non-number content, you can do so with the paste event and e.clipboardData.getData('plain/text') (for a complete implementation see here)

Test with the code below:

var myInput = document.getElementsByTagName('input')[0];
myInput.addEventListener('keypress', function(e) {
  var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
  function keyAllowed() {
    var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
                51,52,53,54,55,56,57,91,92,93];
    if (key && keys.indexOf(key) === -1)
      return false;
    else
      return true;
  }
  if (!keyAllowed())
    e.preventDefault();
}, false);

// EDIT: Disallow pasting non-number content
myInput.addEventListener('paste', function(e) {
  var pasteData = e.clipboardData.getData('text/plain');
  if (pasteData.match(/[^0-9]/))
    e.preventDefault();
}, false);

<input type="text">

@Mouser thanks for pointing out, I forgot to test that. However because I was going for a 'preventive' approach, I went with the `paste` event to intercept the content before it is outputted. — webketje, Mar 09 '15 at 23:23

score 6 · Answer 2 · answered Mar 09 '15 at 21:53

6

You can validate the value with regex with the pattern attribute:

<input type="number" pattern="^[1-9]\d*$" name="qty">

answered Mar 09 '15 at 21:53

pstenstrm

6,339
5
41
62

Len · Answer 3 · 2019-07-16T00:43:43.280

5

You can use the built-in form validation validity.valid, user won't be able to enter or paste negative values. Also user won't be able enter decimals. More info here

<input type="number" min="1" oninput="validity.valid||(value='');"/>

edited Jul 16 '19 at 00:43

answered Feb 11 '19 at 09:07

Len

534
1
15
31

score 0 · Answer 4 · answered Dec 04 '17 at 19:21

0

try this :

<input type="number" min="0">

answered Dec 04 '17 at 19:21

hakuna

6,243
10
52
77

This only works with using the arrows, users can still enter or copy and paste a negative number in – Lucas Hendren Oct 19 '18 at 21:55

How to prevent a user from entering negative values in Html input

4 Answers4