Select2未使用Jquery 3.3.1上的Jquery- validating插件进行验证

Question

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

问题出在我的表单中，我正在验证一个select2多选输入，这个验证在jQuery2.2.4上有效。但不知何故，在jquery 3.3.1中，这是不起作用的。我使用下面的代码来忽略select2输入的隐藏输入，正如我所说的，它适用于jQuery2.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，看看它是如何工作的。谢谢

Answer 1

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

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

当集合中的第一个元素是select-multiple (即设置了multiple属性的select元素)时，.val()将返回一个包含每个选定选项的值的数组。在jQuery 3.0中，如果没有选择任何选项，它会返回一个空数组；在jQuery 3.0之前，它会返回null。

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