表单提交前显示SweetAlert方法及关联提交故障求助

架构老林

2026-5-14

解决表单提交前显示SweetAlert并确认后提交的问题

我来帮你排查代码里的问题，你遇到的情况是因为几个小细节没处理对，咱们一步步来修正：

你的代码里的几个问题：

事件参数名不匹配：你定义的事件参数是event，但调用preventDefault()时用的是e，这会导致报错，浏览器无法阻止默认的表单提交行为，所以一开始直接提交了表单没弹窗。
SweetAlert2的回调写法错误：Swal.fire()并不支持把回调作为第二个参数，它是基于Promise的异步方法，需要用.then()来处理用户点击确认后的操作。
拼写错误：你写的trigger('sumbit')里的单词拼错了，应该是submit。
上下文丢失：在Swal的回调里，$(this)已经不再指向表单元素了，所以需要提前把表单对象存到变量里复用。

修正后的代码：

$(document).ready(function () {
  $("form").submit(function (event) {
    // 阻止默认表单提交行为
    event.preventDefault();
    // 保存表单对象，避免回调里上下文丢失
    const form = $(this);
    
    Swal.fire({
      icon: 'success',
      title: 'Registado',
      text: 'O seu veiculo foi registado!'
    }).then((result) => {
      // 检查用户是否点击了确认按钮
      if (result.isConfirmed) {
        // 手动触发表单提交
        form.trigger('submit');
      }
    });
  });
});