輸入文字時觸發的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("");
  }
});