jQuery 多表单验证在 1 页中使用 add 方法

Question

该页面包含多个表单，每个表单都已经实施了验证，没有问题。由于某些情况，我不得不使用 addMethod 进行 jquery 验证，以使 select2.js 按我的意愿工作。如果 select 的值为 0，则它应返回 false 进行验证。 addMethod 适用于 1 个表单，当我添加其他表单的 addMethod 时，验证似乎不再正常工作。

demo site click here

场景
单击左上角的“报告”按钮>单击“转化率报告”按钮，然后将显示其中一个表单，单击“搜索”按钮，然后将显示错误消息。默认情况下，当输入字段中有值时，错误消息将分别消失。至于 select2 下拉菜单，错误消息仍然存在（奇怪），即使它有价值，而不仅仅是“选择国家”。到目前为止，即使您打开另一个表单，错误消息仍然会持续存在。现在单击“国家报告”按钮，将显示另一个表单，单击搜索按钮，将显示错误消息，因为输入字段为空，现在从 select2 下拉列表中选择一个国家。错误消息消失了（好）。在此期间，返回转换率报告表，然后您将看到 select2 错误消息消失了。即使我更改其中的选择，它也不会再触发错误消息了。

我知道它需要阅读很多内容，但请帮助您的“中级”前端开发人员，谢谢！

HTML 元素

<form id="search_country_report_form" action="con_sum.html">
            <span class="close_search_pop lnr lnr-cross"></span>
            <div class="report_search block_padding">
                <h2>Search Country report</h2>

                <ul class="report_search_date_range clearfix">
                    <li><span><b>Date range*</b></span></li>
                    <li>
                        <label>From</label><input type="text" readonly="readonly" name="startStringDate" id="search_country_date_from" />
                    </li>
                    <li>
                        <label>to</label><input type="text" readonly="readonly" name="endStringDate" id="search_country_date_to" />
                    </li>
                </ul>
                <ul class="report_search_top_cat clearfix">
                    <li>
                        <label><b>Country name*</b></label>
                        <select id="search_country_country_name" name="countryName">
                            <option value="0">Select country</option>
                            <option value="TH">Country #1</option>
                            <option value="MY">Country #2</option>
                        </select>
                    </li>
                </ul>
                <div class="btn_wrap clearfix">
                    <button class="search_btn" type="submit">Search</button>
                </div>
            </div>
        </form>

jQuery 脚本

$("form").each(function () {
        var search_country_report = $('#search_country_report_form');

        $.validator.addMethod("countryNameCheck", function (value) {
            var theField = $("#search_country_country_name");
            if (theField.val() === '0') {
                console.log($("#search_country_country_name").val());
                return false;
            } else {
                return true;
                console.log($("#search_country_country_name").val());
            }
        });

        var validobj = search_country_report.validate({
            rules: {
                startStringDate: {
                    required: true
                },
                endStringDate: {
                    required: true
                },
                countryName: {
                    required: true,
                    countryNameCheck: true
                }
            },
            messages: {
                startStringDate: "Required",
                endStringDate: "Required",
                countryName: "Country name is required"
            },
            onKeyUp: true,
            errorElement: 'span',
            errorClass: "searchErrorText",
            errorPlacement: function (error, element) {
                var elem = $(element);
                error.insertAfter(element);
            },

            highlight: function (element, errorClass, validClass) {
                var elem = $(element);
                if (elem.hasClass("select2-offscreen")) {
                    $("#s2id_" + elem.attr("id") + " span").addClass(errorClass);
                } else {
                    elem.addClass(errorClass);
                }
            },

            unhighlight: function (element, errorClass, validClass) {
                var elem = $(element);
                if (elem.hasClass("select2-offscreen")) {
                    $("#s2id_" + elem.attr("id") + " span").removeClass(errorClass);

                } else {
                    elem.removeClass(errorClass);
                }
            }
        });

        var thisParent = $('.select2-selection').parent();
        $(document).on("change", thisParent, function () {
            if (!$.isEmptyObject(validobj.submitted)) {
                validobj.form();
            }
        });

        $(document).on("select2-opening", function (arg) {
            var elem = $(arg.target);
            if ($("#s2id_" + elem.attr("id") + " span").hasClass("myErrorClass")) {

                $(".select2-drop span").addClass("myErrorClass");
            } else {
                $(".select2-drop span").removeClass("myErrorClass");
            }
        });

        search_country_report.submit(function () {
            validobj.form();
        });
    });

Answer 1

不是onKeyUp。它是onkeyup，您不能将其设置为true 而不会破坏某些东西。请参阅文档。

jqueryvalidation.org/validate/#onkeyup

其次，您的自定义方法只需要定义一次。从您的.each() 中删除它。实际上，.validate() 方法似乎是您在.each() 中唯一需要的东西。

您的代码中可能还有一些我没有看到的问题。

Answer 2

非常感谢大家，在 Sparky 的帮助下并与 Chearius solution 结合，我将 add 方法移到 .each 之外并解决了！只是想在以后有人遇到这个问题时分享它。

    $.validator.addMethod("name", function (value, element) {
        // get closest form
        var thisForm = $(element).closest("form");
        // find the target
        var theField = thisForm.find(".select2-hidden-accessible");
        if (theField.val() === '0') {
            return false;
        } else {
            return true;
        }
    });