title: EventListener that triggers when text input, but NOT when input is deleted
body: <p><strong>Background</strong>:</p>
  
  <p>I'm adding event listeners to a HTML form, that check if the input in each field is valid. For example:</p>
  
  <pre><code>inputElement.addEventListener("input", function(event) {
          if (!isValid(input.value)) {
              input.setCustomValidity("Input is invalid");
          } else {
              input.setCustomValidity("");
          }
  });
  </code></pre>
  
  <p>However, the form field in question is not mandatory - the user can submit the form with the field empty, but they can't submit it with invalid input.</p>
  
  <p><strong>Problem</strong>:</p>
  
  <p>If the user submits the form without ever touching that input (leaving it blank) the <code>"input"</code> event never occurs, and the form can be submitted. (Good)</p>
  
  <p>If the user enters incorrect input and submits the form, they get a warning message <code>"input is invalid"</code>. (Good)</p>
  
  <p>But, if they enter invalid input, get the warning message, and then <em>delete</em> the input, the warning message will appear and the form will now submit. (Bad)</p>
  
  <p>This happens because the act of deleting the input triggers the <code>input</code> event. </p>
  
  <p><strong>Progress</strong>:</p>
  
  <p>I've tried using the <code>textInput</code> event instead but I get the same behaviour. I've checked for <a href="https://developer.mozilla.org/en-US/docs/Web/Events" rel="nofollow noreferrer">other available events</a> but I can't see one that would fix this problem.</p>
  
  <p>I <em>could</em> make it work by modifying my <code>isValid</code> function to return <code>true</code> if given an empty string, but I'd like to avoid that if possible. The reason being: I've simplified the example here but in reality that function is actually <code>isValidServiceId</code> and technically an empty string is not a valid service id.</p>