jQuery 1 个页面中的多个表单验证，使用 add 方法

Question

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

demo site click here

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

我知道有很多东西要读，但请帮助你的 "intermediate" 前端开发人员，谢谢！

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;
        }
    });

jQuery 1 个页面中的多个表单验证，使用 add 方法

jQuery multiple form validation in 1 page with add method

jquery

jquery-validate

jquery-select2