表单无法触发POST提交请求，无数据发送，如何调试？

问题描述 #

现有如下表单HTML代码：

<form class="newsletter" action="https://sendy.thegoodfellas.net/sendy/subscribe" method="POST" accept-charset="utf-8">
  <span class="container active">
    <label for="name">What's your name?</label>
    
    <input class="required" type="text" name="name" id="name"/>
    <span class="next" title="next"></span>
  </span>
  <span class="container">
    <label for="email">What's your email?</label>
    <input class="required" type="email" name="email" id="email"/>
  </span>
  <span class="submit" type="submit" name="submit" id="submit"></span>
</form>

对应的JS代码：

$('.next').click(function(){
  var nextTarget = $(this).parent().siblings('span');
  var currentTarget = $(this).parent();
  currentTarget.removeClass('active');
  nextTarget.addClass('active').find('input').focus();
});
    
$('input#email').on('keydown',function(e){
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 13) {
    $('.submit').trigger('click');
  }
})
    
$('.submit').click(function(){
  var target = $(this);
  var lastInputContainerLabel = target.parent().find('.container.active label');
  target.addClass('submitted');
  lastInputContainerLabel.addClass('fadeOut');
})

点击提交后，浏览器网络面板无POST请求，无任何数据发送。

调试步骤 #

• 检查提交元素类型：打开浏览器开发者工具（F12），切换到Elements面板，选中.submit元素，确认它是<span>标签，而非原生的<button type="submit">或<input type="submit">——原生表单不会自动识别span的点击为提交动作。
• 验证事件触发状态：在JS的$('.submit').click()函数内添加console.log('submit clicked')，刷新页面后点击提交，查看控制台是否输出日志，确认事件是否被正确触发。
• 检查表单有效性：在控制台执行document.querySelector('.newsletter').checkValidity()，查看返回值是否为true，确保必填字段已填写且格式合规（比如邮箱格式正确）。
• 手动测试表单提交：在控制台执行document.querySelector('.newsletter').submit()，查看网络面板是否出现POST请求，判断是触发逻辑问题还是表单配置问题。

问题根源与修复方案 #

核心问题 #

当前代码仅在点击.submit时修改了样式，完全没有触发表单的原生提交动作；同时.submit用了span标签，无法自动触发表单提交行为。

修复代码 #

修改JS中的提交事件处理函数，添加表单提交逻辑：

$('.submit').click(function(){
  var target = $(this);
  var form = target.closest('.newsletter');
  // 先验证表单有效性
  if (form[0].checkValidity()) {
    var lastInputContainerLabel = target.parent().find('.container.active label');
    target.addClass('submitted');
    lastInputContainerLabel.addClass('fadeOut');
    // 触发表单提交
    form.submit();
  } else {
    // 验证不通过时提示用户
    form[0].reportValidity();
  }
})

另外，建议将.submit的span标签替换为原生提交按钮（可保留原有样式），更符合表单规范：

<button class="submit" type="submit" name="submit" id="submit"></button>

补充调试技巧 #

• 若修复后仍无请求，检查浏览器是否开启广告拦截插件，部分插件会阻止第三方域名的表单提交。
• 在网络面板勾选Preserve log，防止页面跳转后请求日志被清空，便于查看请求状态。

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