jQuery Select2 和验证引擎答案

【问题标题】：jQuery Select2 & Validation EnginejQuery Select2 和验证引擎
【发布时间】：2013-12-13 11:22:46
【问题描述】：

如何正确验证使用 Select2 的选项值？在更改为任何其他值之前设置了某个值时，我遇到了问题。它看起来正确，但在我更改值之前会显示验证错误。感谢您的帮助。

【问题讨论】：

你能用一些代码证明这个问题吗？我无法想象你的意思。

标签： jquery-select2 jquery-validation-engine

【解决方案1】：

试试这个解决方案。

How to make jQuery validation engine works well for select2()?

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

【解决方案2】：

在 select2.js 文件中

找到这个（第 341 行）

if (this.indexOf("select2-") !== 0) {

并替换为

if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {

【讨论】：

【解决方案3】：

我遇到了同样的问题。所以在select2.min.js中找到这个笔画（脚本中应该是2个笔画）：

D(this.container,this.opts.element,this.opts.adaptContainerCssClass)

并在您找到的笔划后立即添加此代码

,this.container.removeClass("validate[required]")

这应该可以解决您的问题。

【讨论】：

【解决方案4】：

将此 CSS 添加到您的 head 标签中。

   .has-error {
        border-color: #dd4b39 !important;
    }

这就是我为 Jquery 验证引擎调用 select2 的方式。

$("#form").validate( {
            ignore: ".ignore, .select2-input",
            rules: {
                txtproduct: "required",
                txtwarehouse: "required",
                //txtdescription: "required",
                txtquantity: {required:true,number:true},
                txtrate: {required:true,number:true},
                txtdiscounttype: "required",
                txtdiscount: {required:true,number:true},
                txtamount: {required:true,number:true},
            },
        highlight: function ( element, errorClass, validClass ) {
                $(element).addClass("has-error");
                if($(element).hasClass('select2-hidden-accessible'))
                {
                    $(element).next().find("[role=combobox]").addClass('has-error');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass("has-error");
                if($(element).hasClass('select2-hidden-accessible'))
                {
                    $(element).next().find("[role=combobox]").removeClass('has-error');
                }
            }
        } );

}

【讨论】：

回答提供的明码在 Stack Overflow 上不被接受。你能解释一下你的解决方案是做什么的以及它是如何解决问题的。
嗨 Neol，这是不支持 select2 库的 Jquery 验证引擎问题，我使用 if 条件行对其进行了修改，它对我来说非常有效。 if($(element).hasClass('select2-hidden-accessible')) { $(element).next().find("[role=combobox]").removeClass('has-error'); }

【解决方案5】：

Select2 库将原来的选择器隐藏起来，验证引擎对隐藏的元素不起作用，所以先让可见，然后验证引擎才能看到。第二个是我们需要为我们隐藏选择器元素，大约有两种方法可以做到，例如将其不透明度设置为“0”，或者将其高度/宽度设置为“0px”，实际上我们都需要。

下面是代码示例：

$("select").select2();
$.each($(".select2-container"), function (i, n) {
  $(n).next().show().fadeTo(0, 0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
  $(n).prepend($(n).next());
  $(n).delay(500).queue(function () {
    $(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
    $(this).dequeue();
  });
});

参考：http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/

【讨论】：