Select2 not validating with jquery-validate plugin on Jquery 3.3.1

Select2 not validating with jquery-validate plugin on Jquery 3.3.1

I'm working on a project that requires me to use all the latest release of the jquery.

Issue is in my form i'm validating a select2 multiselect input and this validation is working on jquery 2.2.4. but somehow in jquery 3.3.1 thats not working. i'm using following code to ignore hidden inputs of select2 inputs and as i said its working on jquery 2.2.4

HTML

  1. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"> </head> <body> <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> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></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> </body> </html>

  2. $('.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"] } } });

for full code click here

feel free to change jquery 3.3.1 to 2.2.4 and see how is working. thanks