Question

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

demo site click here

方案
点击＆＃34;报告＆＃34;按钮左上角＆gt;点击转换率报告按钮，然后将显示其中一个表单，点击＆＃34;搜索＆＃34;按钮，然后将显示错误消息。默认情况下，当输入字段中包含值时，错误消息将分别消失。对于select2下拉列表，错误消息仍然是（奇怪的），即使它有价值而不仅仅是＆＃34;选择国家＆＃34;。截至目前，即使您打开另一个表单，错误消息仍将保持不变。现在点击＆＃34;国家报告＆＃34;按钮，将显示另一个表单，单击搜索按钮，将显示错误消息，因为输入字段为空，现在从select2下拉列表中选择一个国家/地区。错误消息消失了（很好）。在此处，返回转换率报告表单，然后您将看到select2错误消息已消失。即使我更改了其中的选择，它也不会再触发错误消息。

我知道很多东西要读，但请帮助你的同伴＆＃34;中间＆＃34;前端开发人员，谢谢！

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结合，我将添加方法移到.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;
        }
    });

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

2 个答案: