在验证阶段使用preventDefault() 阻止表单提交，但在验证问题解决后却再也无法提交表单（php/jquery）

前端开发 2026-07-11

我正在尝试提交一个表单并使用jQuery验证数据，当数据不正确时通过调用preventDefault() 来阻止提交。解决了验证错误后，我想在再次按下提交按钮时提交表单，但出于某种原因它不再提交。下面是我的代码：

html：

$(document).on('click', '#go', function() {
  var inputA = $('#inputA').val();
  var inputB = $('#inputB').val();

  if (inputA != inputB) {

    alert("not same!");
    $(document).on('submit', '#myForm', function(e) {
      e.preventDefault();
    });

  } else {

    $(document).on('submit', '#myForm', function(e) {
      if ($(this).hasClass('form-submitted')) {
        e.preventDefault();
        return;
      }
      $(this).addClass('form-submitted');
    });

    $("[name='message']").html("Please wait, i am being submitted.");

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="myForm" method="POST">
  <input type="text" id="inputA" name="inputA" value="1">
  <input type="text" id="inputB" name="inputB" value="2">
  <input type="submit" name="go" id="go" value="Submit this" class="btn">
  <input type="text" name="message">
</form>

提交时的PHP：

if(isset($_POST['go'])){

    //do stuff here    

    echo '<script>alert("Submission successful!")</script>';
    echo '<script>window.close()</script>';
}

正如你所看到的，当值不正确时，我使用preventDefault()。我可以修改它，然后再次按下提交按钮，但它只会显示消息「Please wait, i am being submitted.」并且不会重新加载进入成功脚本。我的代码有什么问题吗？我可能会考虑用AJAX来处理这个，但我真的只是想知道为什么它不起作用？我尝试查找过类似情况，但没有找到任何解释。

P.S.添加类 'form-submitted' 是为了防止重复提交，这是我在Stack Overflow上看到的做法。

解决方案

你在条件语句中的submit事件监听器存在问题。需要重新结构化，但我不想在这里展开细节。

简短的答案是使用内置表单验证。你希望比较两个输入的值。你可以通过把其中一个的 pattern 属性改为与另一个的值匹配来实现。然后把它们设为 required。现在，只有当表单有效，也就是两个值匹配时，才会提交。

如果你监听 invalid 事件，可以设置提示信息；当值改变（在 input 上）时，你可以把文本再移除。

jQuery的 on() 不像原生的 addEventListener() 那样支持 useCapture 标志。因此我在 invalid 事件上使用它。

$(document.forms.myForm).on('input', e => {
  let form = e.target.form;
  switch (e.target.name) {
    case 'inputA':
      form.inputB.pattern = e.target.value;
      break;
  }
  if (e.target.validity.valid) {
    form.message.value = '';
  }
});

$(document.forms.myForm)[0].addEventListener('invalid', e => {
  e.preventDefault();
  e.target.form.message.value = 'Values are not equal';
}, true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="myForm" method="POST">
  <input type="text" name="inputA" value="1" required>
  <input type="text" name="inputB" value="2" pattern="1" required>
  <input type="submit" name="go" value="Submit this" class="btn">
  <output name="message"></output>
</form>

备选方案

你对表单的 submit 事件处理了两次，这会导致这个问题，
我怀疑你把表单的 submitted 状态和 valid 状态混淆了
你可以把代码重构为单一的提交事件处理程序，如下所示：

$(document).on('submit', '#myForm', function (e) {
  if($(this).hasClass("valid")==false || $(this).hasClass('form-submitted')){
    e.preventDefault();
  }
  $(this).addClass('form-submitted');
});

$(document).on('submit', '#myForm', function(e) {
  if ($(this).hasClass("valid") == false || $(this).hasClass('form-submitted')) {
    e.preventDefault();
  }
  $(this).addClass('form-submitted');
});

$(document).on('click', '#go', function() {
  var inputA = $('#inputA').val();
  var inputB = $('#inputB').val();
  var $form = $('#myForm');

  if (inputA != inputB) {
    alert('not same!');

    $form.removeClass("valid");
  } else {
    alert("same! submitting");

    $form.addClass("valid");
    $("[name='message']").val('Please wait, i am being submitted.');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="myForm" method="POST">
  <input type="text" id="inputA" name="inputA" value="1">
  <input type="text" id="inputB" name="inputB" value="2">
  <input type="submit" name="go" id="go" value="Submit this" class="btn">
  <input type="text" name="message">
</form>

版本2：如果你想防止表单再次提交：

$(document).on('submit', '#myForm', function(e) {
  var $form = $(this);

  //validate form and track status
  var inputA = $('#inputA').val();
  var inputB = $('#inputB').val();
  var $message = $("[name='message']");

  if (inputA != inputB) {
    alert('not same!');

    $form.removeClass('valid');
    $message.val('invalid form');
  } else {
    $form.addClass('valid');
    $message.val('Please wait, i am being submitted.');
  }

  if ($form.hasClass('valid') == false || $form.hasClass('form-submitted')) {
    if ($form.hasClass('form-submitted')) {
      alert("re-submitting not allowed");
    }
    e.preventDefault();
  } else {
    alert('form submitting');
    $form.addClass('form-submitted');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="myForm" method="POST" action="javascript:void(0)">
  <input type="text" id="inputA" name="inputA" value="1">
  <input type="text" id="inputB" name="inputB" value="2">
  <input type="submit" name="go" id="go" value="Submit this" class="btn">
  <input type="text" name="message">
</form>

理想情况下，你应该使用任意一个 jQuery验证插件

JavaScript