HTML 'required'错误触发为时已晚

Question

我有以下(非常简化的(HTML和javascript代码。当我将numDig字段留空并单击"保存"按钮时，required错误显示在输入字段上的时间有点太晚，页面将重定向。当页面已经重定向和加载时，会出现required错误。为什么会发生这种情况，有办法解决吗？目前，我可以在不填写必填字段的情况下提交表格。

我尝试了button和input，但它们都做了相同的事情。当页面已经重定向时，会出现required错误。

<script>
function saveSettings(){
//More code here
//and redirect to the previous page
}
</script>
<form>
<div class="space">
<p> Enter the number you like </p>
<input id="numDig" type="number" min="1" max ="6" required>
</div>
<div class="space">
<button type="submit" onclick="saveSettings()">Save</button>
<!--<input type="submit" onclick="saveSettings()" value="Save">-->
</div>
</form>

Answer 1

您将函数放入onsubmit中，以使正确生效

<form onsubmit="saveSettings()">
<div class="space">
<p> Enter the number you like </p>
<input id="numDig" type="number" min="1" max ="6" required>
</div>
<div class="space">
<input type="submit">Save</button>
</div>
</form>