Avoid negative values in HTML input fields

How to avoid negative value entries in HTML form input fields. Turn off input numbers turning negatives. Limit input field value to zero.

There are many cases in which the input field needs a number as a value. When the input type is given as a number using type=”number”, the input field will take a number as input. But the problem with this is it also takes negative numbers as values. Sometimes the mouse scroll may lead to negative values.

When our input field value is a number and is applicable for some calculations then the negative values will be a great issue. Eg: discount, price, etc. These examples are applicable for the calculation of the total price.

So in these cases, we have to limit the input field values to zero and greater. For that, we can make use of the

attribute min="0" for the input tag

Avoiding negatives values in input field – example code

        <input

          value={addProductInfo.pricing?.mrpPrice}
          type="number"
          min="0"
          placeholder="Enter price"
        />