JQuery无法捕获表单提交：Ajax正常但数据验证代码失效（回车提交）

看起来你遇到的核心问题是：点击提交按钮时Ajax能正常运行，但回车提交表单时，验证逻辑没被正确触发，甚至可能直接走了表单的默认提交流程。这是因为你把验证逻辑单独放在了form的submit事件里，而按钮的click事件只处理了Ajax却没做验证，同时回车提交和按钮点击的流程没有打通。

下面是修正后的方案，让两种提交方式都能触发验证和Ajax：

第一步：抽离验证逻辑为独立函数 #

把验证代码抽成单独函数，方便两种提交方式复用，避免重复代码：

$(document).ready(function() {
  // 统一的输入验证函数
  function validateSearchInput() {
    var name = $.trim($("#search").val());
    var isValid = true;
    $('#error').text(''); // 每次验证前清空错误提示

    // 依次检查输入规则
    if (name === '') {
      $('#error').text('Please enter some text');
      isValid = false;
    } else if (name.length < 3) {
      $('#error').text('Please enter more letters');
      isValid = false;
    } else if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      isValid = false;
    }

    return isValid;
  }

第二步：修改按钮点击事件，加入验证 #

在提交按钮的点击事件里，先执行验证，只有验证通过才发起Ajax请求：

// 提交按钮点击事件
  $(":submit").click(function(e) {
    e.preventDefault(); // 先阻止表单默认提交行为

    // 验证通过才执行Ajax
    if (validateSearchInput()) {
      var msg = $("#search").val();
      $.ajax({
        url: 'search.php',
        method: 'POST',
        data: { msg: msg },
        dataType: 'json',
        success: function(response) {
          $(".content").html("");
          $.each(response, function() {
            $.each($(this), function(i, item) {
              var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
              // 修正原代码里span标签的闭合错误
              $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
            });
          });
        }
      });
    }
  });

第三步：统一处理回车提交的表单submit事件 #

回车提交表单会触发form的submit事件，这里直接阻止默认行为，然后触发提交按钮的点击事件，复用上面的验证和Ajax逻辑：

// 处理回车提交表单
  $('form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认跳转
    $(":submit").click(); // 触发提交按钮的点击事件，复用验证和Ajax逻辑
  });
});

修正HTML里的小问题 #

原HTML里的input属性写法有错误，比如autofocus的赋值应该放到value属性里，同时input标签不需要闭合：

<form action="index.php" method="post" id="myForm" autocomplete="on">
  <pre>
    <input name="msg" id="search" type="text" 
           <?php if(isset($_POST['msg'])) { echo 'value="' . htmlentities($_POST['msg']) . '"'; } ?>
           autofocus>
    <span id="error"></span>
    <input type="submit" style="border:0; padding:0; font-size:0">
  </pre>
</form>
<div class="content"></div>

关键修改点说明 #

1. 统一验证逻辑：把验证抽成函数后，不管是按钮点击还是回车提交，都能确保输入符合规则才发起请求。
2. 打通提交流程：回车提交时直接触发按钮的点击事件，避免重复写Ajax代码，同时保证验证和Ajax都能执行。
3. 修正标签错误：原代码里的span标签没有正确闭合（少了一个"），现在已经修复，避免DOM渲染问题。
4. 清空错误提示：每次验证前清空错误信息，避免多次提交时旧提示残留。

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