如何使 select2 与 jquery.validation 插件一起使用？答案

【问题标题】：How to make select2 work with jquery.validation plugin?如何使 select2 与 jquery.validation 插件一起使用？
【发布时间】：2014-07-12 13:43:16
【问题描述】：

我正在尝试使用 jquey.validation 插件验证 select2 字段，但没有任何反应。

我想选择必填字段。

我正在使用这个自定义验证功能：

$.validator.addMethod("requiredcountry", function(value, element, arg){
              return arg != value;
         }, "Value must not equal arg.");

这是规则：

rules:
{
 country:
 {
         required: true,
         requiredcountry: ""
 }
}

我应该使用哪个 select2 字段来匹配规则？

我很欣赏如何使 select2 与 jquery.validation 一起工作的任何想法

10 倍

【问题讨论】：

标签： jquery jquery-validate jquery-select2

【解决方案1】：

只需在您的表单验证功能中添加ignore: [],。它将启用隐藏字段验证。因此您将获得 Select 2 的验证

$("#ContactForm").validate({
  ignore: [],       
  rules: {
    //Rules
  },
  messages: {
    //messages
  }
});

【讨论】：

这很简单 - 但在 Select2 的文档中找不到任何提及
太棒了，经过长时间的尝试解决了我的问题！ +1
我刚刚遇到了同样的问题，如果有人想知道它为什么会发生以及为什么忽略它：[] 正在修复它 - 这是我的故事：1. 我在选择中添加了“隐藏”类它将 display: none 应用于元素 2. 这使得验证将
编辑：我认为问题来自“隐藏”关键字，而不是 css 样式，因为当我将类更改为其他内容时，问题不再可重现。
当我添加ignore:[]时，它正在验证但表单没有提交。

【解决方案2】：

作为提示，请考虑 validate js 将自身绑定到 select 而不是 select 2 的更改。这会导致以下情况出现问题：

有一个必需 select box 被转换为select2
你点击提交，报错提示选择框是必填项。
您从选择 2 中选择了一些选项。
验证错误不会自动隐藏

您可以使用以下方法修复它：

     $("select").on("select2:close", function (e) {  
        $(this).valid(); 
    });

【讨论】：

$("select").on("select2-close", function (e) { $(this).valid(); });

【解决方案3】：

除了 ABIRAMAN 的回答之外，这里还有一些代码

出现错误时使 select2 框变为红色
在 select2 框下方列出错误

<style>
  span.error{
    outline: none;
    border: 1px solid #800000;
    box-shadow: 0 0 5px 1px #800000;
  }
</style>

<script>
 $("#form").validate({
     rules: {
       email: "required"
     },
     highlight: function (element, errorClass, validClass) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); 
       } else {
           elem.addClass(errorClass);
       }
     },    
     unhighlight: function (element, errorClass, validClass) {
         var elem = $(element);
         if (elem.hasClass("select2-hidden-accessible")) {
              $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
         } else {
             elem.removeClass(errorClass);
         }
     },
     errorPlacement: function(error, element) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           element = $("#select2-" + elem.attr("id") + "-container").parent(); 
           error.insertAfter(element);
       } else {
           error.insertAfter(element);
       }
     }
   });

$('select').select2({}).on("change", function (e) {
  $(this).valid()
});
</script>

【讨论】：

如果我没记错的话，在最新版本的 jQuery Validate 脚本中，“unhighlight”已被“success”取代。我还必须将“取消突出显示”部分中的 if 语句更改为以下内容：if (elem.parent().hasClass("select2")) { 因为如果字段无效，select2-hidden-accessible 类似乎会消失。这是使用所有内容的最新版本。
我要补充一点，如果您有 background-color 或某些被 Select2 覆盖的 CSS，您需要将 !important 添加到您的 error CSS 样式中。我有一个background-color: yellow 用于error，而 Select2 覆盖了它。
@dearsina 不，如jqueryvalidation.org/validate中所述，unhighliht 和success 仍然彼此不同

【解决方案4】：

我在一篇博文中对此进行了详细说明：http://chadkuehn.com/jquery-validate-select2/

当您将 Select2 放在 SELECT 标记上时，它会隐藏原始元素。因此，在验证插件中，您必须在突出显示和取消突出显示时调整正确的包装标记。

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

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

在此处查看DEMO。

【讨论】：

select2 4.0.x 的任何更新机会。好像没用。
@Tsukasa 你在我的回答stackoverflow.com/a/46953372/2311074中找到了更新@
非常感谢@Adam，您的回答到今天仍然兼容！

【解决方案5】：

在corinnaerin 发布的论坛@https://github.com/select2/select2/issues/215 上找到了答案。非常适合我。示例代码http://plnkr.co/edit/4QaSguIiYsJtLpuPF8Rc?p=preview

      var $select = $('select').select2({
        placeholder: 'Choose',
        allowClear: true
      });

      /*
       * When you change the value the select via select2, it triggers
       * a 'change' event, but the jquery validation plugin
       * only re-validates on 'blur'
       */
      $select.on('change', function() {
        $(this).trigger('blur');
      });

      $('#myForm').validate({
        ignore: 'input[type=hidden], .select2-input, .select2-focusser'
      });

【讨论】：

赞成：$select.on('change', function() { $(this).trigger('blur'); });
完美的逻辑答案。谢谢

【解决方案6】：

我发现让 Select2 与 jQuery Validate 一起工作在很大程度上取决于创建 Select2 控件时使用的标记。

对于插件的最实际使用，您可能会使用动态加载的数据（通过 Web 服务获得的数据与页面中的静态 <option/> 元素）。而per their spec，实现这一点的方法是将Select2 附加到<input type="hidden"/> 元素。但是，默认情况下，jQuery Validate 不会验证 type="hidden" 的元素。

为了使用 jQuery Validate 验证隐藏元素，必须修改 jQuery Validate 的配置对象中的ignore 属性。请参阅他们的spec 中的ignore 选项。尝试将 ignore 值初始化为 null 以触发验证。

【讨论】：

我目前的策略是将忽略属性分配给名为“ignore-validation”的类，如下所示：ignore: '.ignore-validation' 这样做可以让您打开和关闭验证只需在输入元素上添加/删除该类名即可随意添加/删除特定元素。

【解决方案7】：

只需在验证函数中添加一行。

$('#_form_id').validate({

       ignore: 'input[type=hidden]',
            rules: {
                //Rules
            },
            messages: {
               //messages
            },
}

【讨论】：

我很高兴达米特

【解决方案8】：

查看我的代码。我通过使用这些代码解决了我的问题......只有少数（css，jquery）代码

$(document).ready(function() {

  //form validations---------------------------------------------------------
  $('#sample').validate({
    ignore: [],
    errorClass: "error",
    errorElement: "span"
  });

  $("#receiver_name").select2({
    placeholder: "Receiver Name"
  });

  $("#receiver_name").select2().change(function() {
    $(this).valid();
  });
});

.error .select2-choice.select2-default,
.error .select2-choices {
  color: #a94442;
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error:focus,
.error .select2-choice.select2-defaultLfocus,
.error .select2-choicesLfocus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices,
.error {
  border-radius: 1px;
}

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" />


</head>

<body>
  <form id='sample'>
    <select class="form-control" name="receiver_name[]" id="receiver_name" multiple required>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>


</body>

</html>

【讨论】：

【解决方案9】：

这在 Bootstrap Validator() 中不起作用，因为验证器包含表单中的所有输入。这意味着它将验证 select2 插件的输入搜索字段。这会干扰多选验证

要解决这个问题，只需转到 validator.js 添加select2输入搜索类.select2-search__field 到忽略列表：

Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'

【讨论】：

【解决方案10】：

当您创建自定义规则时，您还必须正确声明它。由于您的自定义规则依赖于参数，因此您必须在声明规则时传递参数

rules: {
   country: {
       required: true,
       requiredcountry: "your argument here"  // <- declare the custom rule
   }
}

【讨论】：

【解决方案11】：

$("select.select2-me").each(function(index, el) {

    if ($(this).is("[data-rule-required]") && 
    $(this).attr("data-rule-required") == "true") {
        $(this).on('select2-close', function(e) {
            $(this).valid()
        });
    }
});

为我工作。

【讨论】：

【解决方案12】：

您可以查看此链接：https://github.com/rkeshmir/select2-validation 在这里，您可以找到验证 select2 组件的最简单方法。想法 id 触发对 DOM 中所有 <select> 项目的更改事件的验证。我还添加了必需的 CSS 规则来突出显示输入的错误和成功状态。

【讨论】：

【解决方案13】：

要验证 'select2' 输入，您首先必须告诉 jquery validate 考虑隐藏元素：

$.validator.setDefaults({ 
ignore: [],
});

这是自定义突出显示/取消突出显示，我使用 jquery validate 来指向 select2 和 tagit 错误：

$("#someform").validate({
        rules: {
            nazwa: {
                required: true
            },
            ilosc_w_opakowaniu: {
                required: "#czy_opakowanie_zbiorcze:checked"
            }
        },
        messages: {
            nazwa: "Musisz wypełnić pole [Nazwa]",
            ilosc_w_opakowaniu: "Musisz podać ilość produktu w opakowaniu zbiorczym",
        },

        highlight: function( element, errorClass, validClass ) {
            if ( element.type === "radio" ) {
                this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
            } else {
                $( element ).addClass( errorClass ).removeClass( validClass );
            }

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.addClass( errorClass ).removeClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.addClass( errorClass ).removeClass( validClass );

        },
        unhighlight: function( element, errorClass, validClass ) {
            if ( element.type === "radio" ) {
                this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
            } else {
                $( element ).removeClass( errorClass ).addClass( validClass );
            }

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.removeClass( errorClass ).addClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.removeClass( errorClass ).addClass( validClass );
        }
     });

还有一些 CSS：

/** select2 error hightight **/
.select2.error .select2-selection--single{
    border-color:red !important;
    color:red !important;
}

/** tagit error highlight **/
.tagit.error{
   border-color:red !important;
   color:red !important;
}

【讨论】：

【解决方案14】：

我解决了这个问题，解决方案是为每个 validate 实例修改 highlight、unhighlight 和最重要的 errorPlacement 方法。但是，为了不修改每个文件，我把修改的内容放在了 jquery.validate.js 文件中

highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                   $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            }
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().removeClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                    $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
                } else {
                    $( element ).removeClass( errorClass ).addClass( validClass );
                }
            }
        }
    },
    errorPlacement: function(error, element) {
        var elem = $(element);
        if (elem.attr('readonly') == 'readonly') {
            element = $("#" + elem.attr("id")).parent();
            error.insertAfter(element);
        } else {
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent().parent().parent();
                error.insertAfter(element);
            } else {
                error.insertAfter(element);
            }
        }
    }

【讨论】：

【解决方案15】：

根据 jQuery 验证器的错误放置逻辑，您可以使用如下标记。

<div class="input-group col-sm-12">
  <select class="form-control select2" id="ELEMENT ID" name="ELEMENT NAME">
  </select>
</div>

它将错误块放置在select2框下方并使错误块可见。

【讨论】：