使用confirm()与<input type="submit">时点击取消仍提交表单的解决方法

你的核心问题在于：submit按钮的onclick事件返回false无法阻止浏览器默认的表单提交行为。浏览器在触发按钮的onclick后，依然会执行表单的提交流程，所以即使你在else分支返回false，表单还是会被提交。

而改用普通button的话，确实无法触发HTML5的required验证，因为只有submit类型的按钮或调用form.submit()才会触发内置验证。

最优解决方案是把逻辑绑定到表单的onsubmit事件，通过控制onsubmit的返回值来决定是否允许提交，同时保留HTML5的验证功能。

修改后的代码示例 #

<form action="https://google.com" onsubmit="return handleSubmit(this)">
    <input type="text" required>
    <input type="submit">
</form>
<script>
function handleSubmit(form) {
    // 先触发表单验证，不通过的话浏览器会自动弹出提示
    if (!form.checkValidity()) {
        return false;
    }

    if (confirm('Sei sicuro di inviare la richiesta?')) {
        const submitBtn = form.querySelector('input[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.value = 'ok';
        // 返回true，允许浏览器执行默认提交流程
        return true;
    } else {
        alert("else");
        // 返回false，阻止表单提交
        return false;
    }
}
</script>

关键修改点说明 #

1. 绑定onsubmit事件：表单的onsubmit是控制提交流程的关键节点，返回false会直接阻止默认提交行为，返回true则允许提交。
2. 保留HTML5验证：调用form.checkValidity()会触发内置验证，如果输入为空，浏览器会自动弹出required的提示框，无需额外代码。
3. 无需手动调用form.submit()：当确认提交时返回true，浏览器会自动执行提交，避免重复触发流程。

另一种用event.preventDefault()的写法 #

如果你更习惯用事件对象来控制，也可以这样写：

<form action="https://google.com" onsubmit="handleSubmit(event)">
    <input type="text" required>
    <input type="submit">
</form>
<script>
function handleSubmit(event) {
    const form = event.target;
    if (!form.checkValidity()) {
        event.preventDefault();
        return;
    }

    if (!confirm('Sei sicuro di inviare la richiesta?')) {
        alert("else");
        event.preventDefault();
    } else {
        const submitBtn = form.querySelector('input[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.value = 'ok';
        // 不调用preventDefault，允许默认提交
    }
}
</script>

这两种写法都能完美实现你的需求：既保留required验证，又能在点击confirm取消时阻止表单提交。

内容的提问来源于stack exchange，提问作者Edoardo