表单双提交按钮：如何仅点击Finish按钮时触发JavaScript校验？

当然可以实现只让验证代码在点击Finish按钮时运行，下面提供两种实用的方法：

方法一：直接绑定Finish按钮的点击事件 #

把原来绑定表单submit事件的逻辑，改成绑定Finish按钮的点击事件，点击时先执行验证，验证通过再手动提交表单：

$(window).load(function() {
  // 绑定Finish按钮的点击事件
  $('input[type="submit"][value="Finish"]').on('click', function(e) {
    e.preventDefault(); // 阻止默认的表单提交行为
    if (validate()) { // 执行验证逻辑
      $('#editRecord').submit(); // 验证通过，手动提交表单
    }
  });
});

这样只有点击Finish按钮时才会触发验证，Save Draft按钮会直接提交表单，不会经过验证环节。

方法二：在表单submit事件中判断触发源 #

如果不想修改原有的事件绑定逻辑，可以在表单的submit事件里，判断是哪个按钮触发了提交，再决定是否执行验证：

$(window).load(function() {
  $('#editRecord').on('submit', function(e) {
    // 获取触发提交的按钮
    var clickedButton = $('input[type="submit"][name="buttonType"]:focus');
    // 如果点击的不是Finish按钮，跳过验证
    if (clickedButton.val() !== 'Finish') {
      return true; // 直接提交表单
    }
    // 否则执行验证逻辑
    return validate();
  });
});

补充说明 #

• 若用户通过回车键触发表单提交（未点击按钮），默认会触发第一个submit按钮（Save Draft）的行为，不会触发验证。如果需要让回车键默认触发Finish按钮，可以给Finish按钮添加autofocus属性：

<input type="submit" name="buttonType" value="Finish" class="ml1" autofocus>

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