Select2不通过Jquery 3.3.1上的jquery-validate插件进行验证

Question

我正在做一个项目，要求我使用所有最新版本的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小提琴

随时将jquery 3.3.1更改为2.2.4，并查看其工作方式。 谢谢

Answer 1

jQuery 3+返回一个用于选择多个元素的空数组，而在此之前它返回null。 验证插件似乎将此视为有效值。

从http://api.jquery.com/val/

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

您可能需要为此编写自定义验证，或要求在插件本身中解决此问题。