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

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事件代替，但行为却相同。 我已经检查了其他可用事件，但看不到可以解决此问题的事件。

我可以通过修改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("");
  }
});