title: How to call form validity event if no input is entered
body: <p>I have a simple form with bootstrap which I need to validate before submitting. It has auto support for invalid-feedback. It looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let forms = document.querySelectorAll(".needs-validation");
  var productNameField = document.getElementById("productName");
  
  productNameField.addEventListener("input", function () {
          var val = document.getElementById("productName").value;
          console.log("not entering here if I don't enter an input", val);
          if (!isValidString(val)) {
              productNameField.setCustomValidity("invalid");
          } else {
              productNameField.setCustomValidity("");
          }
      });
      
   
  Array.prototype.slice.call(forms).forEach(function (form) {
          form.addEventListener(
              "submit",
              function (event) {
                  if (!form.checkValidity()) {
                      console.log("not valid");
                      event.preventDefault();
                      event.stopPropagation();
                  }
                  console.log("here validation");
                  form.classList.add("was-validated");
              },
              false
          );
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form
                      action="/products/addProduct"
                      enctype="multipart/form-data"
                      class="needs-validation"
                      novalidate
                      method="post"
                  &gt;
                      &lt;div class="col-md-12 position-relative"&gt;
                          &lt;label for="productName" class="form-label"
                              &gt;Product Name&lt;/label
                          &gt;
                          &lt;input
                              type="text"
                              name="productName"
                              id="productName"
                              class="form-control"
                          /&gt;
                          &lt;div class="invalid-feedback"&gt;
                              Please provide a valid Product Name(at least two
                              characters, no special characters allowed).
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;button type="submit" id="savebutton" name="Submit"&gt;
                              Create
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now when I type an input I immediately see an error if !validString (because of the input eventlistener). But if I just click on the submit button it is not calling the validString function.</p>
  <p>What should I do ?</p>