Formvalidation.io - Cannot read property 'classList' of null

Question

I am always getting an error in my console when using formvalidation.io.

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 (https://formvalidation.io/guide/plugins/recaptcha/)

My HTML form:

                                <form id="contact" method="post" action="/vendor/contact-form.php">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group label-floating is-empty">
                                                <label class="bmd-label-floating">Naam</label>
                                                <input type="text" name="naam" id="naam" class="form-control">
                                                <span class="material-input"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group label-floating is-empty">
                                                <label class="bmd-label-floating">Telefoonnummer</label>
                                                <input type="text" name="telefoon" id="telefoon" class="form-control">
                                                <span class="material-input"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group label-floating is-empty">
                                        <label class="bmd-label-floating">Mailadres</label>
                                        <input type="email" name="email" id="email" class="form-control">
                                        <span class="material-input"></span>
                                    </div>
                                    <div class="form-group label-floating is-empty">
                                        <label for="bericht" class="bmd-label-floating">Uw bericht</label>
                                        <textarea name="bericht" class="form-control" id="bericht" rows="6"></textarea>
                                        <span class="material-input"></span>
                                    </div>
                                </div>
                                <div class="card-footer justify-content-between">
                                    <div class="form-check">
                                        <!-- De captcha container -->
                                        <div id="captchaContainer"></div>
                                    </div>
                                    <button type="submit" class="btn btn-brown">Aanvragen</button>
                                </div>
                            </form>

And this is my validation script (validation-contact.js):

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',
        }),
    },
})

});

EDIT: In the head of my page I have:

    <link rel="stylesheet" href="/assets/css/fontawesome-all.css" />
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css">
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">

and in the footer:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>    
<script src="/vendor/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Recaptcha.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Tachyons.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>

EDIT:EDIT:

The bottom of my page looks like this:

Answer 1

I had a very similar issue with version 1.3 of FormValidaiton.io. For what it's worth, and in case it helps you, I solved mine by nesting any form-check DIV elements inside a form-group DIV.

<div class="form-group"><div class="form-check"></div></div>

An alternative which also worked was to use the rowSelector option - as specified in this example here.

https://formvalidation.io/guide/examples/validating-checkbox-list-placed-multiple-columns/

Answer 2

<div class="form-row">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input">
</div>
</div>

1.We have to include form-group to all fields in the form. 2. if we have check boxes, include form-check class with respect to form-group class. then add form-check-input class to input tag. 3.if you are using reCapture check box please refer this link (https://formvalidation.io/guide/plugins/recaptcha/)

If you want to identify the error fields. Please remove fields in form validation one by one then check that classList error is getting or not. if we got that error in one particular field. You have to modify that filed only, as mentioned above.