Formvalidation.io - Невозможно прочитать свойство 'classList' из null - PullRequest
0 голосов
/ 07 ноября 2018

Я всегда получаю сообщение об ошибке в моей консоли при использовании formvalidation.io.

enter image description here

Понятия не имею, в чем причина этой ошибки. Я также все еще получаю спам на некоторых веб-сайтах, даже когда я использую backendVerificationURL. Я использую Invisible ReCaptcha (https://formvalidation.io/guide/plugins/recaptcha/)

Моя HTML-форма:

                                <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>

И это мой сценарий проверки (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',
        }),
    },
})
* * 1016});

EDIT: В начале моей страницы у меня есть:

    <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">

и в нижнем колонтитуле:

    <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:

Нижняя часть моей страницы выглядит так: enter image description here

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019
<div class="form-row">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input">
</div>
</div>

1.Мы должны включить form-group во все поля формы. 2. если у нас есть флажки, включите класс проверки формы относительно класса группы формы. затем добавьте класс проверки формы ввода в тег ввода. 3.Если вы используете флажок reCapture, перейдите по этой ссылке (https://formvalidation.io/guide/plugins/recaptcha/)

Если вы хотите идентифицировать поля ошибок. Пожалуйста, удалите поля в форме проверки один за другим, затем убедитесь, что ошибка classList возникает или нет. если мы получили эту ошибку в одном конкретном поле. Вы должны изменить только это поле, как указано выше.

0 голосов
/ 26 января 2019

У меня была очень похожая проблема с версией 1.3 FormValidaiton.io. Для чего это стоит, и в случае, если это поможет вам, я решил, вложив любые элементы form-check DIV в form-group DIV.

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

Альтернативой, которая также работала, было использование опции rowSelector - как указано в этом примере здесь.

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

...