title: Bootstrap 4 Form Validation - Custom styling not working after checkValidity() call
body: <p>The form tag specifies <strong>class="needs-validation"</strong> and has the <strong>novalidate</strong> attribute to indicate custom validation.</p>
  
  <p>When the code runs and displays the form, click the button with an empty text field and since it is required, it should display the message and style the field as red. </p>
  
  <p>Validation is occurring by the call to <strong>checkValidity()</strong> and it is returning false for an empty field but the field is not styled as either <strong>:invalid</strong> nor <strong>:valid</strong>.</p>
  
  <p>This is the doc about what I am attempting: <a href="https://getbootstrap.com/docs/4.0/components/forms/#validation" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/forms/#validation</a></p>
  
  <p>Thanks</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>$(function () {
      $("#btnSubmit").on("click", function (e) {
          var form = $("#CertForm")[0];
          var isValid = form.checkValidity();
          if (!isValid) {
              e.preventDefault();
              e.stopPropagation();
          }
          form.classList.add('was-validated');
          return false; // For testing only to stay on this page
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- 
    Why neither feedback displays when clicking Submit?
    Also, the required txtName input field should be red if invalid
  --&gt;
  
  &lt;form id="CertForm" class="needs-validation" novalidate=""&gt;
      &lt;label for="txtName"&gt; * Name:&lt;/label&gt;
      &lt;input id="txtName" required /&gt; Blank for Invalid case
      &lt;div class="invalid-feedback"&gt;Please enter a name&lt;/div&gt;
      &lt;div class="valid-feedback"&gt;Looks good!&lt;/div&gt;
      &lt;br /&gt;
      &lt;button id="btnSubmit" type="submit" class="btn btn-primary"&gt;Click Me!&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>