Question

背景：

我正在将事件侦听器添加到HTML表单中，以检查每个字段中的输入是否有效。例如：

inputElement.addEventListener("input", function(event) {
        if (!isValid(input.value)) {
            input.setCustomValidity("Input is invalid");
        } else {
            input.setCustomValidity("");
        }
});

但是，所涉及的表单字段不是必填字段-用户可以在表单字段为空的情况下提交表单，但不能在输入无效的情况下提交表单。

问题：

如果用户提交表单时从未触摸过该输入（将其留空），则"input"事件将永远不会发生，并且可以提交表单。（好）

如果用户输入了错误的信息并提交了表单，他们将收到警告消息"input is invalid"。（好）

但是，如果他们输入无效的输入，得到警告消息，然后删除输入，则将出现警告消息，并且现在将提交表单。（不好）

发生这种情况是因为删除输入的行为触发了input事件。

进度：

我尝试改用textInput事件，但行为却相同。我已经检查过other available events，但看不到能解决此问题的一个。

我可以通过修改我的isValid函数以使其工作，如果给定一个空字符串，则返回true，但是我想尽可能避免这种情况。原因是：我在这里简化了示例，但实际上函数实际上是isValidServiceId，从技术上讲，空字符串不是有效的服务ID。

Answer 1

您可以修改条件逻辑，使其说“如果输入被填充 和无效”，而不仅仅是“如果输入无效” ...

inputElement.addEventListener("input", function(event) {
  if (input.value.length && !isValid(input.value)) {
    input.setCustomValidity("Input is invalid");
  } else {
    input.setCustomValidity("");
  }
});

输入文字时触发的EventListener，但删除输入时不触发

1 个答案: