javascript - 为什么表单的 onsubmit 函数只调用一次？

Question

和 jar 头上写的差不多。此代码片段演示了该问题:

function check(e) {
  console.log($('input[name="myinput"]').val());
  if ($('input[name="myinput"]').val() == "123") {
    return true;
  } else {
    $('input[name="myinput"]')[0].setCustomValidity("Invalid");
    return false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form onsubmit="return check()">
    <input name="myinput">
    <input type="submit">
  </form>
</div>

加载表单后，在输入字段中输入 1 并提交表单。提交失败，因为输入字段的值不是 123，并且值 "1" 记录在控制台中。现在将值更改为其他值并重新提交表单；控制台中没有多余的行，即使输入的值为 123，“无效”表单有效性仍然存在。

为什么 onsubmit 处理程序只调用一次？

Answer 1

因为处于“无效”状态的表单(因为表单内的输入处于“无效”状态)将不会提交。

创建的表单有效性不会在 submit 事件上更改，因为正如您所注意到的，您不会获得任何新的 submit。您必须在提交之前更改表格的有效性。通常，会对每个输入单独检查表单有效性。从这里开始就是你自己的口味了。我建议检查 blur 上每个输入的有效性:

$('input[name="myinput"]').on("blur", () => {
    // Do your checks and setCustomValidity depending on if is valid or not
});

这样，如果所有输入都有效，您只会收到 submit 事件。顺便说一下，要使其工作，您必须在启动时将所有输入设置为无效状态，以避免在不触及任何输入的情况下提交空内容。

如果所有输入均为空，另一种方法可能是禁用提交按钮。为此，您还需要 JavaScript 并检查所有输入上的 change 或 input 事件。