JSFiddle - React, Tailwind, and code Playground
HTML
<form id="someform">
<div id="smallnumberContainer">
<label for="smallnumber">Put here some number</label>
<input type="number" name="smallnumber" step="0.000001" value="0.0005">
</div>
<div id="verysmallnumberContainer">
<label for="verysmallnumber">Put here some number as well</label>
<input type="number" name="verysmallnumber" step="0.0000001" value="0.0005">
</div>
<input type="submit" value="Send me">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
<script>
$("#someform").validate({
debug: true,
rules: {
smallnumber: {
required: true,
min: 0.0005,
},
verysmallnumber: {
required: true,
min: 0.0005,
}
},
submitHandler: function(form) {
alert("Form is valid");
},
invalidHandler: function(event, validator) {
alert("Form is invalid");
}
});
</script>