Ajax注册表单验证：错误信息未在当前页面显示却跳转至其他页面

让我来帮你排查问题——核心原因是你的AJAX逻辑存在几个关键错误，导致表单其实还是在执行默认提交行为（跳转到signup.inc.php），而非通过AJAX异步获取错误信息。具体问题和修复方案如下：

1. jQuery语法错误（最致命的问题） #

你在获取表单字段值的时候，漏掉了方法调用的.运算符，比如：

var first = $("#mail-first")val(); // 错误：缺少 . 运算符

正确写法应该是：

var first = $("#mail-first").val(); // 正确：.val() 是jQuery方法

这个语法错误会直接导致JS执行中断，AJAX代码根本没跑起来，表单就会按照默认的action属性跳转到signup.inc.php，自然错误信息就显示在那个页面了。

2. 元素类名拼写不一致 #

你的HTML里提示信息的p标签类名是form-messsage（注意有三个s）：

<p class="form-messsage"></p>

但jQuery里你试图加载内容到.form-message（只有两个s）：

$(".form-message").load(...)

就算AJAX逻辑正常，也找不到正确的元素来展示错误信息。

3. 修正后的完整代码 #

修复后的signup.php JS与HTML部分： #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("form").submit(function(event){
    event.preventDefault();
    // 修正语法错误：添加 .val() 的 . 运算符
    var first = $("#mail-first").val();
    var last = $("#mail-last").val();
    var email = $("#mail-email").val();
    var uid = $("#mail-uid").val();
    var pwd = $("#mail-pwd").val();
    var submit = $("#mail-submit").val();
    // 修正类名拼写：与HTML中的类名统一
    $(".form-message").load("includes/signup.inc.php", {
      first: first,
      last: last,
      email: email,
      uid: uid,
      pwd: pwd,
      submit: submit
    });
  });
});
</script>
</head>
<body id="signupbackground">
<section class="main-container">
  <div class="main-wrapper">
    <form class="signup-form" action="includes/signup.inc.php" method="POST">
      <input id="mail-first"type="text" name="first" placeholder= "Firstname">
      <input id="mail-last" type="text" name="last" placeholder="Lastname">
      <input id="mail-email" type="text" name="email" placeholder="E-mail">
      <input id="mail-uid"type="text" name="uid" placeholder="Username">
      <input id="mail-pwd" type="password" name="pwd" placeholder="Password">
      <button id="mail-submit" type="submit" name="submit">Sign up</button>
      <!-- 修正类名：form-messsage → form-message -->
      <p class="form-message"></p>
    </form>
  </div>
</section>

额外建议：增强AJAX的可靠性 #

如果想更灵活地处理响应（比如成功/失败状态），可以用$.post代替load，示例如下：

$.post("includes/signup.inc.php", {
  first: first,
  last: last,
  email: email,
  uid: uid,
  pwd: pwd,
  submit: submit
}, function(response) {
  $(".form-message").html(response);
}).fail(function() {
  $(".form-message").html("<span class='form-error'>请求失败，请稍后重试</span>");
});

当你修复这些问题后，表单就会通过AJAX异步提交数据，signup.inc.php输出的错误信息会被加载到当前页面的.form-message元素中，不会再跳转到新页面啦。

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