jQuery提交表单时如何区分提交按钮仅在发布内容时执行校验

解决方法 #

方法一：标记提交按钮类型（无按钮结构改动） #

你可以通过临时变量记录用户点击的按钮类型，在校验逻辑中判断是否执行校验：

1. 首先为两个提交按钮增加标识，方便绑定事件：

<button type="submit" id="publish-btn">Submit</button>
<button type="submit" name="rdraft" value="1" id="draft-btn">Save to drafts</button>

2. 编写对应的JS逻辑：

// 标记是否为草稿提交
let isDraft = false;

// 草稿按钮点击时标记状态
$('#draft-btn').click(() => {
  isDraft = true;
})

// 发布按钮点击时重置状态
$('#publish-btn').click(() => {
  isDraft = false;
})

$('#form').submit(function(e) {
  // 草稿提交直接放行，不校验
  if(isDraft) return true;

  // 原有校验逻辑写在这里
  // 校验不通过可通过 e.preventDefault() 阻止提交
})

这种方法不需要修改原有的表单提交参数逻辑，草稿按钮的rdraft参数会自动随表单提交，同时兼容回车提交场景：回车默认触发第一个提交按钮（发布），会正常执行校验。

方法二：修改草稿按钮类型，手动提交（更简洁） #

你可以把草稿按钮改为普通按钮，点击时直接调用原生表单提交方法跳过jQuery的submit事件校验：

1. 修改按钮结构：

<button type="submit">Submit</button>
<!-- 把type从submit改为button -->
<button type="button" name="rdraft" value="1" id="draft-btn">Save to drafts</button>

2. 编写JS逻辑：

// 原有submit事件只处理发布按钮的校验逻辑
$('#form').submit(function(e) {
  // 原有校验逻辑
})

// 草稿按钮手动提交表单
$('#draft-btn').click(function() {
  // 追加rdraft参数到表单中
  $('#form').append('<input type="hidden" name="rdraft" value="1">');
  // 原生submit方法不会触发jQuery绑定的submit事件，直接提交
  $('#form')[0].submit();
})

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