Question

锡罐上的内容差不多。此代码段演示了该问题：

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，“ Invalid”表单仍然有效。

为什么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事件。

为什么表单的onsubmit函数仅调用一次？

1 个答案: