e.preventDefault 阻止成功的提交事件

Question

我有一个表单的事件监听器。 如果验证失败，我会调用e.preventDefault() 。 向用户显示一条消息，他们修复错误，然后尝试再次提交表单。 我遇到的问题是e.preventDefault() function 在验证失败后阻止表单再次提交。 我知道该事件需要再次绑定到表单元素，但我不确定解决此问题的最佳方法。 这是我的代码：

form.addEventListener("submit", function(e){
   let submitBtn = document.getElementById("cr-submit");
   submitBtn.disabled = true;
   if(validateForm() === false){
     submitBtn.disabled = false;
     e.preventDefault();
   }
}, false);

Answer 1

我相信事件 object 每次都是新的，因此您不必“阻止”默认行为。 validateForm() function 更有可能在您不期望的情况下返回 false。

Answer 2

我怀疑您的validateForm()没有按您的预期工作，因为您的代码应该在 validateForm().== false 时提交。 也许validateForm()总是返回 false？

Answer 3

所以我的问题最终与e.preventDefault()完全无关，实际上是由我使用的框架 Ruby on Rails 引起的。 RailsUJS在提交时自动禁用表单提交按钮。 jQuery ，我以前使用的这个实现很好。 但是，当我将 jQuery 转换为纯JS时，启用该字段的代码实际上并未启用该字段。 在我的听众被解雇后， RailsUJS似乎实际上禁用了该字段。 所以，我不得不从我的提交按钮中删除自动禁用功能，现在我让我的JS处理禁用该按钮。

<%= i.submit("Submit", data: { disable_with: false }) %>