带有附加表单元素的 jQuery 验证答案

【问题标题】：jQuery Validate with appended form element带有附加表单元素的 jQuery 验证
【发布时间】：2019-01-15 10:28:55
【问题描述】：

我已经阅读了关于 SO 的四个相关答案，它们构成了我在这里尝试的动态验证的主要部分。

我有一个包含一些动态操作的表单，例如添加和删除包含用户研究或体验的块 (div)。每个块都包含一些我需要验证的元素。

仅当您关注并提交表单时，对附加元素的验证才有效，在此之前，如果您不关注例如“study_5”的元素并提交表单，它将被毫无问题地提交（即使如果它有所需的标签）

这是我的 JS：

var multiple_formation_max_fields = 10;
            var multiple_formation_wrapper = $(".multiple-formation");
            var multiple_formation_add_button = $(".add_formation");

            var x = {{ Auth::user()->candidate and Auth::user()->candidate->certifications->count() > 0 ? Auth::user()->candidate->certifications->count() + 1 : 1}};
            $(multiple_formation_add_button).click(function (e) {
                e.preventDefault();
                if (x < multiple_formation_max_fields) {
                    x++;
                    $(multiple_formation_wrapper).append(
                        '<div class="sub-form">' +
                                                    // deleted unusfull code
                        '<div class="col-lg-6">' +
                        '<span class="pf-title">Établissement</span>' +
                        '<div class="pf-field">' +
                        '<input type="text" class="form-control" required id="formation_establishment_'+x+'" placeholder="ISET, Esprit, .. " name="formation_establishment[]">' +
                        // deleted unusfull code
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                }
                $('.date').dateDropper();
                $(".chosen").chosen();
                $('#formation_establishment_'+x).rules('add', {
                    'required': true
                });
                $('#form').validate();

            });

结果就像我点击提交而不关注附加到表单的第二个元素：

第一个经过验证的元素有效，因为它主要在页面上。第二个没有。第三个有效，因为我在专注于那里时按下了提交。

【问题讨论】：

您提到您已经尝试过在 SO 上发布的四种解决方案。如果不链接到他们，就没有任何意义，因为我们无法知道您在谈论哪些答案。

标签： javascript jquery jquery-validate

【解决方案1】：

jQuery Validate插件的正常操作：

Initialize 表单上的插件页面加载通过.validate() 方法。请不要在click 处理程序中初始化表单（不要调用.validate() 方法）。
通过.rules() 方法为动态添加的表单字段添加规则。

您不能在步骤 1 之前执行步骤 2。

您在.rules() 之后调用.validate()，它位于click 处理程序中。 .validate() 方法是表单上插件的初始化，只应在页面加载时调用一次。

在使用.validate() 初始化表单之前，您永远不能调用.rules() 方法。

因此，将.validate() 完全拉出click 处理程序，并且只在文档就绪处理程序中调用一次。

【讨论】：