jQuery表单验证提交后跳转contact.php不刷新页面问题求助

存在的核心问题 #

• 未阻止表单默认提交行为：你使用的按钮类型为type="submit"，点击后会优先触发表单原生提交逻辑，直接跳转到form标签action属性指定的contact.php页面，你的异步提交逻辑还没执行完就已经发生跳转
• jQuery Validate用法错误：当前代码仅初始化了验证实例，没有判断验证是否通过就直接发送AJAX请求，验证逻辑完全没有起到拦截作用
• AJAX参数未定义：代码中data字段使用的fname/lname/email三个变量没有提前从表单输入项中取值，直接传递会触发JS报错，也会导致请求参数异常
• 事件绑定不合理：绑定提交按钮的点击事件无法覆盖回车提交等其他表单提交场景，绑定表单自身的submit事件兼容性更好

修正后的代码 #

jQuery代码 #

$(document).ready(function(){
  // 初始化表单验证，使用官方推荐的submitHandler处理验证通过后的提交逻辑
  $('#orderForm').validate({
    // 可在此处添加自定义验证规则，无特殊需求默认会识别input的required/type等属性做验证
    submitHandler: function(form) {
      // 先获取表单输入值
      const fname = $('#first_name').val();
      const lname = $('#last_name').val();
      const email = $('#email').val();
      
      // 发送异步提交请求
      $.ajax({
        url:'contact.php',
        type:'post',
        data:{fname:fname,lname:lname,email:email},
        success:function(response){
          location.reload(); // 提交成功后执行页面刷新
        }
      });
      // 阻止表单原生提交行为
      return false;
    }
  });
});

HTML代码（无需改动，保持原有即可） #

如果你不需要兼容无JS环境下的表单提交，也可以删除form标签的action和method属性，避免误触发跳转。

内容的提问来源于stack exchange，提问作者Márton Stark