表单验证失败仍提交：如何阻止Javascript验证不通过时的表单提交

你的代码存在两个关键问题导致验证失败时无法阻止表单提交，以下是修复方案：

修复步骤 #

1. 修正validateFinish函数的事件参数问题 #

原函数中尝试调用ev.preventDefault()，但调用时未传递事件对象，导致ev为undefined并抛出错误，干扰了验证逻辑的执行。只需移除函数内多余的ev.preventDefault()，因为表单的submit事件中已经会根据验证结果决定是否阻止提交：

function validateFinish() {
  // Add your validation logic for the Finish button here

  var sectionsTouched = $('tbody').has(':checked'),
    inputs = {},
    errorMessage = '';

  if (sectionsTouched.length === 0) {
    errorMessage = 'Please check something first.';
  } else if (sectionsTouched.length > 1) {
    errorMessage = 'Please complete one section only';
  } else {
    sectionsTouched.find('input').each(function(i, e) {
      var me = $(e),
        name = me.attr('name');
      inputs[name] = !!inputs[name] || me.is(':checked');
    });
    $.each(inputs, function(k, v) {
      if (!v) {
        errorMessage = 'Please complete all questions.';
      }
      return v;
    });
  }
  if (errorMessage !== '') {
    $('#error').html(errorMessage);
    return false;
  }
  return true;
}

2. 确保表单绑定了正确的ID #

检查你的HTML表单标签是否包含id="editRecord"，因为你的JS代码是通过$("#editRecord")绑定submit事件的，如果表单没有这个ID，事件不会触发，验证逻辑也就不会执行：

<form id="editRecord">
  <!-- 表单内容 -->
  <div class="rate-buttons left py2">
    <input type="submit" name="buttonType" id="saveDraft" value="Save Draft" class="mr1">
    <input type="reset" name="buttonType" value="Reset" class="mx1">
    <input type="submit" name="buttonType" id="submit" value="Continue" class="ml1">
  </div>
  <div id="error" style="color: red"></div>
</form>

原理说明 #

当点击Continue按钮触发表单submit事件时：

• 代码会判断点击的按钮是Continue，然后调用validateFinish()
• 如果验证失败，validateFinish()返回false，此时执行e.preventDefault()阻止表单提交
• 验证成功则返回true，表单正常提交

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