Select2 未使用 Jquery 3.3.1 上的 jquery-validate 插件进行验证答案

【问题标题】：Select2 not validating with jquery-validate plugin on Jquery 3.3.1Select2 未使用 Jquery 3.3.1 上的 jquery-validate 插件进行验证
【发布时间】：2019-02-18 09:17:46
【问题描述】：

我正在做一个需要我使用所有最新版本的 jquery 的项目。

问题出在我的表单中，我正在验证 select2 多选输入，并且此验证适用于 jquery 2.2.4。但不知何故在 jquery 3.3.1 那不起作用。我正在使用以下代码来忽略 select2 输入的隐藏输入，正如我所说，它在 jquery 2.2.4 上工作

$('.js-states').select2();

$.validator.setDefaults({
  ignore: ":hidden:not(.js-states)"
});

$("#this_form").validate({
  rules: {
    input_1: {
      require_from_group: [1, ".requered-group"]
    },
    input_2: {
      require_from_group: [1, ".requered-group"]
    },
    'input_3[]': {
      require_from_group: [1, ".requered-group"]
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/additional-methods.js"></script>

<form id='this_form'>
  <select class="js-states form-control requered-group" multiple="multiple" name="input_3[]" tabindex="-1" style="display: none; width: 100%;">
    <option value="all_services">ALL</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
  </select>
  <input type='text' name='input_1' class='requered-group'>
  <input type='text' name='input_2' class='requered-group'>
  <input type='submit' name='action' value='submit'>
</form>

JS Fiddle

随意将 jquery 3.3.1 更改为 2.2.4，看看它是如何工作的。谢谢

【问题讨论】：

请在此处包含您的代码，而不是链接 JsFiddle
已添加完整代码。

标签： javascript jquery jquery-validate jquery-select2

【解决方案1】：

jQuery 3+ 为 select-multiple 元素返回一个空数组，而在此之前它返回 null。验证插件似乎将此视为有效值。

来自http://api.jquery.com/val/

当集合中的第一个元素是 select-multiple（即带有multiple 属性集的select 元素），.val() 返回一个包含每个选定选项的值的数组。从 jQuery 3.0 开始，如果未选择任何选项，则返回一个空数组；在 jQuery 之前 3.0，返回null。

您可能必须为此编写自定义验证或请求在插件本身中修复该问题。

【讨论】：