如何阻止两输入值不一致时表单提交？修复data-disable-with按钮弹窗后无法启用问题

我使用以下代码在表单提交时检查两个输入字段的值是否一致：

$(document).on('submit', '.confirm-prescription', function(e) {
  e.preventDefault();
  const pharmacyCommentNew = $('#pharmacy_comment_new').val();
  const pharmacyComment = $('#pharmacy_comment').val();

  if (pharmacyCommentNew !== pharmacyComment || pharmacyCommentNew.length !== pharmacyComment.length) {
    enableSubmitButton();
    swal("Error", "Pharmacy comment has been modified. Please save the new comment before submitting.", "error");
    $('#ajax_loader').hide();
    return;
  }

  $('#ajax_loader').show();
  this.submit();
});
function enableSubmitButton() {
  const submitButton = $('#resubmit-btn');
  submitButton.removeAttr('disabled');
  submitButton.val('Submit');
}

此外，我希望在表单提交时通过data-disable-with属性禁用提交按钮，目前按钮可正常禁用，但在sweetalert提示框关闭后无法重新启用，该如何解决？

问题分析 #

data-disable-with通常由Rails UJS这类库实现，它在禁用按钮时会替换按钮文本为data-disable-with的值，同时添加disabled属性，部分实现还会将原始文本存在data-original-text属性中。你当前的enableSubmitButton函数仅移除disabled并硬设文本，没有适配这种特殊的状态修改逻辑，导致按钮无法正确恢复。另外，当前代码在弹出提示框前就调用了启用函数，可能因弹窗的阻塞逻辑导致DOM操作未生效。

解决方案 #

1. 优化字段校验条件：pharmacyCommentNew !== pharmacyComment已经包含了长度不等的情况（值不同必然长度不同或内容不同），可简化条件：

   if (pharmacyCommentNew !== pharmacyComment) {
     // ...后续逻辑
   }
   

2. 修改启用按钮函数：适配data-disable-with的状态还原逻辑：

   function enableSubmitButton() {
     const submitButton = $('#resubmit-btn');
     // 移除禁用属性
     submitButton.removeAttr('disabled');
     // 优先从data-original-text获取原始文本，否则默认用'Submit'
     const originalText = submitButton.data('original-text') || 'Submit';
     // 如果是input类型按钮用val()，如果是button标签用text()
     submitButton.val(originalText);
     // 若为button标签，替换为：submitButton.text(originalText);
   }
   

3. 调整函数调用时机：将启用按钮的逻辑放在sweetalert的关闭回调中，确保用户关闭弹窗后再执行：

   if (pharmacyCommentNew !== pharmacyComment) {
     $('#ajax_loader').hide();
     swal("Error", "Pharmacy comment has been modified. Please save the new comment before submitting.", "error", function() {
       enableSubmitButton();
     });
     return;
   }
   

最终完整代码 #

$(document).on('submit', '.confirm-prescription', function(e) {
  e.preventDefault();
  const pharmacyCommentNew = $('#pharmacy_comment_new').val();
  const pharmacyComment = $('#pharmacy_comment').val();

  if (pharmacyCommentNew !== pharmacyComment) {
    $('#ajax_loader').hide();
    swal("Error", "Pharmacy comment has been modified. Please save the new comment before submitting.", "error", function() {
      enableSubmitButton();
    });
    return;
  }

  $('#ajax_loader').show();
  this.submit();
});

function enableSubmitButton() {
  const submitButton = $('#resubmit-btn');
  submitButton.removeAttr('disabled');
  const originalText = submitButton.data('original-text') || 'Submit';
  submitButton.val(originalText);
}

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