如何让SweetAlert弹窗等待按钮点击？表单提交弹窗消失问题

问题原因 #

alert()是同步执行函数，会阻塞代码进程，直到用户点击确认才会继续执行表单提交；而swal()是异步函数，不会阻塞代码，表单默认的页面跳转行为会立刻触发，导致弹窗被页面刷新冲掉。

解决方案 #

先阻止表单默认提交行为，验证通过后显示SweetAlert弹窗，待用户点击弹窗按钮后再手动提交表单。

修改后的代码 #

JavaScript代码

let form = document.getElementById("form");
form.addEventListener("submit", (e) => {
    // 阻止表单默认提交行为，避免页面立刻跳转
    e.preventDefault();
    const valid = form.checkValidity();
    
    if(valid) {
        swal({
            title:"Registro Salvo!",
            text:"Navegue até dados de natalidade para visualizar.",
            icon:"success", 
            button:"Ok"
        }).then(() => {
            // 用户点击弹窗按钮后，手动提交表单
            form.submit();
        });
    } else {
        // 触发原生表单验证提示，告知用户错误
        form.reportValidity();
    }
});

HTML代码

<form id="form" action="index.html" method="POST">
  <label for="FirstName">First Name:</label>
  <input type="text" id="FirstName" placeholder="First Name" required />
  <label for="LastName">Last Name:</label>
  <input type="text" id="LastName" placeholder="Last Name" required />
  <input type="Submit" value="Submit" />
</form>

关键改动说明 #

1. e.preventDefault()：彻底阻断表单默认提交逻辑，避免页面提前刷新。
2. swal().then()：利用SweetAlert的Promise回调特性，确保只有用户点击弹窗按钮后才执行表单提交。
3. 新增required属性：配合checkValidity()和reportValidity()触发原生验证提示，让无效输入的提示更直观。

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