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>

HTML 'required' 触发错误太晚了

HTML 'required' error firing way too late

html

required