AJAX表单验证通过后，后续表单submit提交失效问题排查

嗨，我看了你的代码，问题出在验证成功后调用$form.submit()的方式上——这个方法会再次触发你绑定的submit事件监听器，相当于又走了一遍验证流程，虽然你的代码里有判断已经验证过就放行，但可能因为事件循环的问题导致表单没正常提交。

最简单的解决办法是调用表单的原生submit()方法，绕过jQuery绑定的事件监听，这样就能直接提交表单了，不会再触发你的验证逻辑。

修改后的代码 #

把AJAX成功回调里的$form.submit()换成原生DOM元素的submit方法：

$(document).ready(function() {
  $('form.validate').on('submit', function(e) {
    var $form = $(this);
    var $submit = $form.find('input[type=submit]');
    var $validate = $form.find('input[name=_validate]');

    if ($validate.length > 0 && $validate.val() == 'success') {
      // 已经验证过，允许提交
      console.log('validated');
      return true;
    }

    e.preventDefault();

    if ($validate.length == 0) {
      $form.append('<input type="hidden" name="_validate" value="asking" />');
    }
    $validate = $form.find('input[name=_validate]');
    var params = $form.serialize();

    $.ajax({
      url: $form.attr('action'),
      method: 'post',
      data: params
    }).then(function(response, statusText, xhrObj) {
      var json = JSON.parse(response);
      if (json._status != 'ok') {
        // 处理错误提示
      } else {
        $validate.val('success');
        // 替换成原生submit方法，绕过jQuery事件监听
        $form[0].submit();
      }
    }).catch(function(data) {
      alert('Error occured');
    });
  });
});

为什么这样有效？ #

jQuery的$form.submit()方法会触发所有绑定在表单上的submit事件处理器，而原生的form.submit()（通过$form[0]获取DOM元素）不会触发任何事件监听器，直接提交表单，完美跳过了我们已经完成的验证流程，避免了循环触发的问题。

另外，你的代码里e.returnValue = true其实是旧IE的写法，在现代浏览器和jQuery的事件处理中，直接return true就足够允许默认行为了，那个可以去掉~

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