Formvalidation.io - 无法读取 null 的属性“classList”

Posted 2023-05-09

【中文标题】Formvalidation.io - 无法读取 null 的属性“classList”

【英文标题】：Formvalidation.io - Cannot read property 'classList' of null

【发布时间】：2019-04-10 17:02:01

【问题描述】：

使用 formvalidation.io 时，我的控制台中总是出现错误。

我不知道这个错误的原因是什么。即使我使用 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',
        ),
    ,
)

);

编辑： 在我的页面顶部，我有：

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

编辑：编辑：

我的页面底部是这样的：

【问题讨论】：

这是您包含 FormValudation.min.js 的方式中的错误。请确保它位于 HTML 页面的 底部。

我用头中的脚本和页脚中的脚本编辑了我的帖子。 FormValidation.min.js 在我的页脚中。

但它们不应该出现在您的页脚中。它们都应该位于页面的最底部，就在结束正文标记之前

再次编辑了我页面底部的截图。 （它们确实在页脚下方）

【参考方案1】：

FormValidaiton.io 的 1.3 版有一个非常相似的问题。为了它的价值，如果它对你有帮助，我通过将任何 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/

【参考方案2】：

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

1.我们必须在表单的所有字段中包含表单组。 2. 如果我们有复选框，请在 form-group 类中包含 form-check 类。然后将表单检查输入类添加到输入标签。 3.如果您使用reCapture复选框，请参考此链接（https://formvalidation.io/guide/plugins/recaptcha/）

如果要识别错误字段。请一一删除表单验证中的字段，然后检查是否出现 classList 错误。如果我们在某个特定领域遇到该错误。如上所述，您只需修改该文件。