JSFiddle - React, Tailwind, and code Playground
HTML
<input type="number" name="id-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">
JavaScript
function checkIsPositive(e) {
const value = parseFloat(e.target.value);
if (e.target.value === "" || value > 0) {
e.target.setCustomValidity("");
} else {
e.target.setCustomValidity("Please select a value that is greater than 0.");
}
}
document.getElementById("float-field").addEventListener("input", checkIsPositive, false);