事件阻止后无法提交表单默认

Question

我有一个使用PHP和javascript验证的表单。PHP端效果很好。Javascript 可以正确验证，但当单击提交按钮时，表单将不会提交。

我已经在表单元素中设置了onsubmit="return validate(event(;"。

在 validate(event( 中，在第一行我有 event.preventDefault((。我已检查表单是否正确验证，并且表单无法提交。

在验证(事件(结束时，如果没有错误，我就可以提交表单。

我试过了

document.getElementById("checkout").submit();
$('form').submit();
$('#checkout').unbind('submit').submit();
$('form')[0].submit();
$('#checkout').off('submit');

下面是相关代码位的摘要。

<form method="post" action="thanks-order.php" id="checkout" name="checkout" onsubmit="return validate(event);">
...
<input type="hidden" name="flag">
<p><input type="submit" name="pay" value="Pay"></p>
...
</form>
<script>
function validate(event)
{
   //prevent form submission
   event.preventDefault();
   //reset error flag
   document.getElementsByName("flag")[0].value = "";
   //
   //form validation code
   //
   ...
   //if error flag is not set to "error"
   if(getFlag()=="")
   {
      //submit form
      //all of these doesn't work
      // document.getElementById("checkout").submit();
      // $('checkout').submit();
      // $('#checkout').unbind('submit').submit();
      // $('form')[0].submit();
      // $('#checkout').off('submit'); // then submit
   }
}
...
</script>

单击提交按钮并出现错误时，将正确显示错误消息。但是，如果没有错误，表单提交对将记录插入数据库没有影响(通过感谢顺序.php(。

Answer 1

当您在验证中无条件运行 preventDefault 时，它始终会阻止表单提交，无论提交如何触发

只需连续运行 preventDefault，如下所示：

function validate(event) {
   //reset error flag
   document.getElementsByName("flag")[0].value = "";
   //
   //form validation code
   //
   ...
   //if error flag is not set to "error"
   if(getFlag()=="") {
      //submit form
      //all of these doesn't work
      // document.getElementById("checkout").submit();
      // $('checkout').submit();
      // $('#checkout').unbind('submit').submit();
      // $('form')[0].submit();
      // $('#checkout').off('submit'); // then submit
   } else {
       //prevent form submission
       event.preventDefault();
   } 
}