How to establish a minimum and maximum amount of a value required by an input in a JS request?

Question

I have a field called Quantidade that the quantity of products for sale should be inserted. My form has a data request that returns the value and quantity of products in stock, this field Quantidade returns that amount of stock of products because of the id="quantidade", then you already receive a value.

Only that the field Quantidade I wish I had a minimum and maximum limit for the inserted quantity using min and max within that <input>, placing a PHP code inside the max to set the maximum amount entered (the min can be zero).

Example: If the field Quantidade receives a value of 30 products because of data request, this field must allow an insertion of at least 0 up to the maximum 30, leaving the field more intuitive.

JS code that requests the value in the field Quantidade

var retornoJson = JSON.parse(ajax.responseText);
document.querySelector("#quantidade").value = retornoJson[0].quantidade;

HTML code:

<p> Quantidade: <input type="number" name="quantidade" id="quantidade" required=""> </p>

Answer 1

You don’t need PHP for this. If you already make the request to get the value, just define it with Javascript even:

const quantidade = document.getElementById("quantidade");

quantidade.min = 0
quantidade.max = 5;

input:invalid {
  border: 2px solid red;
}

Quantidade: <input type="number" id="quantidade">

Note that even if the user can enter a value greater than the maximum set, the field becomes invalid according to the Javascript validation API, which can be proven by the added CSS, which turns the field red.

Another legal field that can be used is the type range:

Quantidade: <input type="range" id="quantidade" min=0 max=5>