javascript - 当文本输入时触发的事件监听器，但当输入被删除时不触发

Question

背景:

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

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

但是，所讨论的表单字段不是强制性的 - 用户可以提交字段为空的表单，但不能提交无效输入的表单。

问题:

如果用户在未触摸该输入(将其留空)的情况下提交表单，则 "input" 事件永远不会发生，并且可以提交表单。 (好)

如果用户输入不正确的内容并提交表单，他们会收到警告消息“输入无效”。 (好)

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

发生这种情况是因为删除输入的操作触发了 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("");
  }
});