title: Formvalidation.io - Cannot read property 'classList' of null
body: <p>I am always getting an error in my console when using formvalidation.io.</p>
  
  <p><a href="https://i.stack.imgur.com/EKM11.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EKM11.png" alt="enter image description here"></a></p>
  
  <p>I have no idea what the cause of this error is. I also still get spam on some websites, even when I am using the backendVerificationURL. I am using Invisible ReCaptcha (<a href="https://formvalidation.io/guide/plugins/recaptcha/" rel="nofollow noreferrer">https://formvalidation.io/guide/plugins/recaptcha/</a>)</p>
  
  <p>My HTML form:</p>
  
  <pre><code>                                &lt;form id="contact" method="post" action="/vendor/contact-form.php"&gt;
                                  &lt;div class="card-body"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;div class="col-md-6"&gt;
                                              &lt;div class="form-group label-floating is-empty"&gt;
                                                  &lt;label class="bmd-label-floating"&gt;Naam&lt;/label&gt;
                                                  &lt;input type="text" name="naam" id="naam" class="form-control"&gt;
                                                  &lt;span class="material-input"&gt;&lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="col-md-6"&gt;
                                              &lt;div class="form-group label-floating is-empty"&gt;
                                                  &lt;label class="bmd-label-floating"&gt;Telefoonnummer&lt;/label&gt;
                                                  &lt;input type="text" name="telefoon" id="telefoon" class="form-control"&gt;
                                                  &lt;span class="material-input"&gt;&lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group label-floating is-empty"&gt;
                                          &lt;label class="bmd-label-floating"&gt;Mailadres&lt;/label&gt;
                                          &lt;input type="email" name="email" id="email" class="form-control"&gt;
                                          &lt;span class="material-input"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group label-floating is-empty"&gt;
                                          &lt;label for="bericht" class="bmd-label-floating"&gt;Uw bericht&lt;/label&gt;
                                          &lt;textarea name="bericht" class="form-control" id="bericht" rows="6"&gt;&lt;/textarea&gt;
                                          &lt;span class="material-input"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="card-footer justify-content-between"&gt;
                                      &lt;div class="form-check"&gt;
                                          &lt;!-- De captcha container --&gt;
                                          &lt;div id="captchaContainer"&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-brown"&gt;Aanvragen&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
  </code></pre>
  
  <p>And this is my validation script (validation-contact.js):</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function(e) {
  FormValidation.formValidation(
      document.getElementById('contact'),
      {
      fields: {
  
          naam: {
              validators: {
                  notEmpty: {
                      message: 'Vul alstublieft uw naam in'
                  }
              }
          },
          telefoon: {
              validators: {
                  phone: {
                      country: 'NL',
                      message: 'U heeft een ongeldig telefoonnummer ingevuld'
                  },
                  notEmpty: {
                      message: 'Vul alstublieft uw telefoonnummer in'
                  }
              }
          },
          email: {
              validators: {
                  notEmpty: {
                      message: 'Vul alstublieft uw emailadres in'
                  },
                  emailAddress: {
                      message: 'U heeft een ongeldig emailadres ingevuld'
                  }
              }
          },
      },
      plugins: {
          trigger: new FormValidation.plugins.Trigger(),
          bootstrap: new FormValidation.plugins.Bootstrap(),
          submitButton: new FormValidation.plugins.SubmitButton(),
          defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
          icon: new FormValidation.plugins.Icon({
              valid: 'fa fa-check',
              invalid: 'fa fa-times',
              validating: 'fa fa-refresh',
          }),
          recaptcha: new FormValidation.plugins.Recaptcha({
              element: 'captchaContainer',
              message: 'The captcha is not valid or expired',
              // Replace with the site key provided by Google
              siteKey: 'MYSITEKEY',
              badge: 'bottomleft',
              theme: 'light',
              size: 'invisible',
              backendVerificationUrl: '/vendor/verification-url.php',
          }),
      },
  })
  </code></pre>
  
  <p>});</p>
  
  <p>EDIT:
  In the head of my page I have:</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="/assets/css/fontawesome-all.css" /&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"&gt;
  &lt;link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css"&gt;
  </code></pre>
  
  <p>and in the footer:</p>
  
  <pre><code>    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"&gt;&lt;/script&gt;    
  &lt;script src="/vendor/formvalidation/dist/js/FormValidation.min.js"&gt;&lt;/script&gt;
  &lt;script src="/vendor/formvalidation/dist/js/plugins/Recaptcha.min.js"&gt;&lt;/script&gt;
  &lt;script src="/vendor/formvalidation/dist/js/plugins/Tachyons.min.js"&gt;&lt;/script&gt;
  &lt;script src="/vendor/formvalidation/dist/js/plugins/Bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  
  
  <p>EDIT:EDIT:</p>
  
  <p>The bottom of my page looks like this:
  <a href="https://i.stack.imgur.com/RUuKl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RUuKl.png" alt="enter image description here"></a>  </p>