Question

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

Answer 1

尝试此解决方案。

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

Answer 2

在 select2.js 文件

中

找到这个（第341行）

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

并替换为

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

Answer 3

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

self.switch.on

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

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

这可以解决你的问题。

Answer 4

将此css添加到您的头标记。

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

这就是我如何调用select2 for Jquery验证引擎。

$("#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');
                }
            }
        } );

}

Answer 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/

jQuery Select2＆amp;验证引擎

5 个答案: