title: Bootstrap 4 Form Validation with Javascript /jQuery
body: <p>I am new to web development, and am trying to set up a practice form to learn form validation. I am following Bootstrap's <a href="https://getbootstrap.com/docs/4.0/components/forms/#validation" rel="nofollow noreferrer">doc</a> for Custom Styles to handle those with accessibility issues that use screen readers, and to standardize the validation appearance to users across different browsers.</p>
  
  <p>I have set up a basic form as well as am trying to create a JavaScript function using jQuery to handle the validation. I feel like I am almost there, but still do not have the validation working as the Bootstrap demo displays.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;form id="signup-form" novalidate&gt;
  
    &lt;div class="form-group"&gt;
      &lt;h1&gt;Sign Up&lt;/h1&gt;
      &lt;p&gt;Use this form to enter your name and email to sign up.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;!-- Name --&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;
          &lt;label for="firstNameInput"&gt;Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="firstNameInput" placeholder="First name" required&gt;
          &lt;div class="valid-feedback"&gt;
            Looks good!
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;
          &lt;label for="lastNameInput"&gt;Last&lt;/label&gt;
          &lt;input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required&gt;
          &lt;div class="valid-feedback"&gt;
            Looks good!
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Email --&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="emailAddressInput"&gt;Email address&lt;/label&gt;
      &lt;input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="name@example.com" required&gt;
      &lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email with anyone else.&lt;/small&gt;
      &lt;div class="invalid-feedback"&gt;
        Please provide a valid email.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Options --&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked&gt;
        &lt;label class="form-check-label" for="type1RadioButton"&gt;
          Type 1 user
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2"&gt;
        &lt;label class="form-check-label" for="type2RadioButton"&gt;
          Type 2 user
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Submit Button --&gt;
    &lt;div class="form-group"&gt;
      &lt;a href="#" class="btn btn-primary" id="submitButton" type="submit"&gt;Submit&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>$(document).ready(function() {
    $("#submitButton").click(function() {
  
      //Fetch form to apply custom Bootstrap validation
      var form = $("#signup-form")
      //alert(form.prop('id')) //test to ensure calling form correctly
  
      if (form.checkValidity() === false) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.addClass('was-validated')
    })
  })
  </code></pre>