title: Bootstrap 4 Form validation email check using the default validation
body: <p>I am trying to get an email for my form to be validated like equalTo using the new Bootstrap 4. If possible i just want to use Bootstrap 4 and don't want to have to include any other library. I assume It just needs something in the javascript at the bottom that checks for matching fields. Any help is appreciated. I am surprised no one else has asked for this, or indeed an example is not on the Bootstrap website. I would imagine it to be a common requirement.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;JQuery-validation demo | Bootstrap&lt;/title&gt;
    &lt;?php
  echo '&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;';
  ?&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form class="needs-validation" novalidate&gt;
      &lt;div class="form-row"&gt;
        &lt;div class="col-md-4 mb-3"&gt;
          &lt;label for="validationCustom01"&gt;Email&lt;/label&gt;
          &lt;input type="Email" class="form-control" id="email" placeholder="Email" required&gt;
          &lt;div class="valid-feedback"&gt;
            Looks good!
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4 mb-3"&gt;
          &lt;label for="validationCustom02"&gt;Confirm Email&lt;/label&gt;
          &lt;input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" required&gt;
          &lt;div class="valid-feedback"&gt;
            Emails should match
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="form-check"&gt;
          &lt;input class="form-check-input" type="checkbox" value="" id="invalidCheck" required&gt;
          &lt;label class="form-check-label" for="invalidCheck"&gt;
        Agree to terms and conditions
      &lt;/label&gt;
          &lt;div class="invalid-feedback"&gt;
            You must agree before submitting.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-primary" type="submit"&gt;Submit form&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;script&gt;
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function() {
        'use strict';
        window.addEventListener('load', function() {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
  
          // check match
  
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>