I found an example at w3schools, where you can enter a date with given max and min attributes.
If I enter a date outside of the specified range and submit it, I see:
It says: "value must be 31-12-1979 or earlier"
Now I believe that this works because the <input type="submit"> is the way to submit this form here.
However, how can I show the same error/validation message if instead of <input type="submit"> I use <button id="bool-submit">Submit</button>?
You can access your form by id and then submit and check if all the fields are valid manually with an onclick:
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<button id="bool-submit" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
if (!document.getElementById("myForm").checkValidity()) {
return;
}
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
