Prevent negative inputs in form input type=“number”?

50
votes

I want to restrict user input to positive numbers in an html form.

I know you can set min="0", however it is possible to bypass this by manually entering a negative number.

Is there any other way to solve this without writing a validation function?

8
htmlformsinputnumbers
In HTML 5 u can do like this: <input type="number" name="quantity" min="0"> and I think this is the most elegant way to restrict user input to positive numbers without writing a validation function. – Bacteria
@GoodBadandUgly — That was mentioned in the question, along with its limitations. – Quentin
Be aware that users can always bypass such limitations! If you submit anything to server-side (read db or data fetch functions) you have to validate once again anyway. – Hafenkranich
Why do you want to block the user without showing him an error message ? If the user tries to enter -10, you give him a 10 which is totally different and he might not even notice you changed his intent (users look at the keyboard while typing). What is the rationale in this ?! I wish developers would stop doing that. – Cesar

8 Answers

117
votes

This uses Javascript, but you don't have to write your own validation routine. Instead just check the validity.valid property. This will be true if and only if the input falls within the range.

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
32
votes

This is not possible without validating the value of the input.

input type=number

The input element with a type attribute whose value is "number" represents a precise control for setting the element’s value to a string representing a number.

Since it is a string representing the number there is no way to be sure that string may be representing numeric values or not.

The Permitted attributes will not give you the ability to validate the value of the number input control.

One way to do this with the help of JavaScript could look like this.

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

If you are planing on sending your data to a server make sure to validate the data on the server as well. Client side JavaScript can not ensure that the data that is being sent will be what you expect it to be.

4
votes

If you want to ensure default value, i.e min value, or any other value, this is working solution. This is also preventing to clear the input field. Same way you can set to it's max value as well. 

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">
3
votes

The following script will only allow numbers or a backspace to be entered into the input.

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">
1
votes

type="number" already solves allowing numbers only to be typed as the other answers here point out.

Just for reference: with jQuery you can overwrite negative values on focusout with the following code:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

This does not replace server side validation!

0
votes

In HTML5, I like this way. Also it's much suitable with angular. 

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">
0
votes

On html put onKeypress event listener

<input type="text" onkeypress="validate(event)">

write the validate function like this:

<script>
    function validate(event) {
      if (event.key == "-") {
        event.preventDefault();
        return false;
      }
    }    
</script>

in case of angularjs pass $event in place of event, i have tested this in angularjs and in javascript

0
votes

WAY 01:

Template:

<input name="price" type="number" (keydown)="onKeydown($event)" min="0" required />

file-name.ts:

onKeydown(event: KeyboardEvent): boolean {
    if (!((event.keyCode > 95 && event.keyCode < 106)
      || (event.keyCode > 47 && event.keyCode < 58)
      || event.keyCode === 8)) {
        return false;
    }
    return true;
  }

WAY 02:

Template:

<input name="price" type="number" min="0" oninput="this.value = Math.abs(this.value)" required />