正确输入数据后登录表单仍无法提交的问题（JS/Ajax）

问题根源 #

你遇到的问题核心是：当通过Ajax验证通过后调用$("#login-form")[0].submit()时，会再次触发你绑定的submit事件处理器，而处理器里的event.preventDefault()会再次阻止表单的默认提交行为，导致表单无法正常提交，陷入循环。

解决方案 #

这里提供两种可行的解决办法，按需选择：

方法一：使用标志位控制阻止行为（推荐）

添加一个全局标志位，只有在未通过Ajax验证的情况下才阻止表单默认提交，验证通过后设置标志位，让后续的提交行为正常执行：

$(document).ready(function() {
  let allowSubmit = false; // 新增标志位，标记是否允许直接提交

  $("#login-form").on("submit", function(event) {
    if (!allowSubmit) {
      event.preventDefault(); // 仅当未允许时阻止默认提交
      var formData = $(this).serialize();

      $.ajax({
        type: "POST",
        url: "/check_login_user_credentials",
        data: formData,
        success: function(response) {
          if (response.response === 'Incorrect data') {
            $("#incorrect-data-error").text('Incorrect username or password');
          } else if (response.response === 'Session already exists') {
            $("#session-exists-error").text('This account is already in use. Please try again later.');
          } else if (response.response === 'Allow') {
            $("#incorrect-data-error").text('');
            allowSubmit = true; // 设置允许提交的标志
            $("#login-form")[0].submit(); // 触发表单提交
          }
        }
      });
    } else {
      allowSubmit = false; // 重置标志位，避免后续重复提交异常
    }
  });
});

这种方法的优势是保留了表单的submit事件绑定，用户后续如果修改表单内容再次提交，依然会走Ajax验证流程。

方法二：解绑事件后提交

在验证通过后，先解绑已经绑定的submit事件处理器，再触发表单提交，这样就不会再次执行阻止逻辑：

$(document).ready(function() {

  $("#login-form").on("submit", function(event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
      type: "POST",
      url: "/check_login_user_credentials",
      data: formData,
      success: function(response) {
        if (response.response === 'Incorrect data') {
          $("#incorrect-data-error").text('Incorrect username or password');
        } else if (response.response === 'Session already exists') {
          $("#session-exists-error").text('This account is already in use. Please try again later.');
        } else if (response.response === 'Allow') {
          $("#incorrect-data-error").text('');
          $("#login-form").off('submit').submit(); // 解绑事件后提交
        }
      }
    });
  });
});

注意：这种方法解绑事件后，如果用户不刷新页面再次提交表单，会直接走表单默认提交流程，不再经过Ajax验证，适合一次性登录场景。

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