AJAX校验MySQL数据重复后无法阻止表单提交问题求助

核心原因 #

按钮为submit类型，点击时会立即触发表单的默认提交行为，而AJAX是异步操作，还未等到后端验证结果返回，表单已经完成提交。同时按钮click事件中的return false无法拦截已触发的表单submit事件，导致验证逻辑失效。

解决方案 #

将前端验证、AJAX后端验证统一整合到表单的submit事件中，先彻底阻止默认提交行为，等待验证结果返回后再决定是否提交表单。

修改后的完整代码 #

HTML（无需改动）

<form id="frm" name="frm" action="000.php?us=1&usop=1&ada=1" method="post" enctype='multipart/form-data'>
  <input name="elm" id="elm" type="text" style="width: 100%;" required>
  <input name="vin" id="vin" type="text" style="width: 100%; text-transform: uppercase;" required>
  <button class="btn-success" type="submit" id="go" name="btn-login">Go!</button>
</form>

JavaScript

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var form = document.getElementById('frm');
    form.addEventListener('submit', function(event) {
      // 第一步：阻止表单默认提交行为
      event.preventDefault();
      
      // 执行HTML5前端必填项验证
      if (form.checkValidity() === false) {
        event.stopPropagation();
        form.classList.add('was-validated');
        return;
      }
      form.classList.add('was-validated');

      // 禁用提交按钮，防止重复提交
      $('#go').prop('disabled', true);

      // 发起AJAX后端重复值验证
      $.ajax({
        type: "POST",
        data: {
          q: $('#elm').val(),
        },
        url: "getunique.php",
        success: function(data) {
          // 去除返回值前后空白，避免空格/换行干扰判断
          data = data.trim();
          if (data === '0') {
            $("#elm").val("");
            alert("duplicated!");
          } else if (data === '1') {
            // 验证通过，手动提交表单
            form.submit();
          }
          // 恢复按钮可用状态
          $('#go').prop('disabled', false);
        },
        error: function() {
          alert("验证请求失败，请重试");
          $('#go').prop('disabled', false);
        }
      });
    }, false);
  }, false);
})();

关键修改说明 #

1. 优先阻止默认提交：在表单submit事件触发时立即调用event.preventDefault()，彻底阻断表单的自动提交流程。
2. 统一验证逻辑：将前端HTML5验证和后端AJAX验证合并到同一个事件中，避免事件冲突。
3. 处理空白干扰：添加data.trim()，解决后端返回结果可能带有的换行、空格等空白字符导致的判断错误。
4. 防重复提交：AJAX请求前后禁用/恢复提交按钮，避免用户多次点击触发重复请求。
5. 错误处理：增加AJAX错误回调，处理请求失败的情况，提升用户体验。

额外注意事项 #

确保getunique.php仅返回纯文本1或0，无任何额外输出（如调试echo、HTML标签等），否则会导致验证判断失效。

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