如何延长表单验证成功后SweetAlert弹窗的显示时长？

我一眼就看出问题所在了——你在显示成功SweetAlert弹窗后，立刻执行了$('#testForm').submit()提交表单，页面刷新直接把刚弹出来的提示框给冲没了，所以它只能闪一下就消失。

核心问题拆解 #

• 你的代码逻辑是：显示成功弹窗 → 立刻提交表单
• 表单提交会触发页面刷新，导致弹窗还没来得及停留就被刷新操作终止了
• 另外还有个小细节：你HTML里的表单ID是testform（全小写），但JS里写的是$('#testForm')（大写F），这会导致表单提交失败，得统一ID大小写。

解决方案 #

利用SweetAlert的回调机制，等用户点击弹窗上的按钮之后，再执行表单提交操作。SweetAlert支持用.then()方法来处理用户确认后的逻辑，完美适配这个场景。

修改后的完整代码 #

HTML部分（修正表单ID大小写） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="testForm">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

JavaScript部分（调整提交逻辑到弹窗回调） #

$("#submit").click(function(event) {
  // 先阻止默认的表单提交行为，避免页面直接刷新
  event.preventDefault();
  
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  
  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (!emailPattern.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else {
    swal({
      title: "Good job!",
      text: "Your subscription has been registered", // 修正拼写错误：You're → Your
      icon: "success",
      button: "Awesome!",
    }).then(() => {
      // 用户点击弹窗按钮后，再提交表单
      $('#testForm').submit();
    });
  }
});

额外优化点 #

1. 开头添加了event.preventDefault()，彻底阻止按钮默认的提交行为，避免逻辑混乱
2. 修正了文本拼写错误：You're subscriptions → Your subscription
3. 统一了表单ID的大小写，确保JS能正确选中表单

这样修改后，成功弹窗会一直显示到用户点击"Awesome!"按钮，之后才会提交表单刷新页面，完美解决弹窗一闪即没的问题。

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